Search

daslikes

Likes DaDas

Category

threejs

3D Simulation of the Earth orbiting the Sun via /r/threejs


3D Simulation of the Earth orbiting the Sun
https://chidiwilliams.github.io/3d-orbit-simulation/

Submitted March 07, 2020 at 01:38PM by wchidi
via reddit https://www.reddit.com/r/threejs/comments/ff08r2/3d_simulation_of_the_earth_orbiting_the_sun/?utm_source=ifttt

Created a demo project using Three.js + Typescript + React via /r/threejs


Created a demo project using Three.js + Typescript + React
https://haoranzhang929.github.io/abyss/

Submitted February 25, 2020 at 01:54AM by mikezhanghao
via reddit https://www.reddit.com/r/threejs/comments/f96wjl/created_a_demo_project_using_threejs_typescript/?utm_source=ifttt

Covid-19 and pumping blood cells… two little graphic demo’s. via /r/threejs


Covid-19 and pumping blood cells… two little graphic demo’s.

Submitted February 18, 2020 at 11:41PM by SarahC
via reddit https://www.reddit.com/r/threejs/comments/f665w5/covid19_and_pumping_blood_cells_two_little/?utm_source=ifttt

What is this DOF shader and how are these effects achieved. via /r/threejs


What is this DOF shader and how are these effects achieved.

https://go.pioneer.com/cornrevolution

I've been trying to learn Three.js for a while yet I'm still very beginner.

Today, I saw this website for the first time and I was like "how the heck is this done"

Some of the things I scratch my head about are the following (text also in the images):

  1. “stroke-dasharray” SVG-like effect yet it’s not SVG I think (it’s in the three.js canvas)
  2. Superb DOF with bokeh. No un-neeed glow around edges of on-focus objects . Looks much better than the demo @ threejs.org
  3. Diagonal transition from once scene to the next. Mask maybe?
  4. Small Text with font that is not HTML or CSS (part of the three.js canvas)
  5. Pixel perfect 1px width vector circle with 360º fade (also part of the three.js canvas)
  6. 2D mouse-over effect that is part of the three.js canvas

Screenshot 1

Screenshot 2

Screenshot 3

I was also looking into the source code trying to figure out that DOF but to no avail. I came to the conclusion that it's not using the same BokehShader2.js from https://threejs.org/examples/webgl_postprocessing_dof2.html

Attempt at Prettifying JS. lol

https://preview.redd.it/u8ammgma3tf41.jpg?width=1465&format=pjpg&auto=webp&s=d36c6b5f3f5b88057fd4f6d281fa048df862c3ac

Where can I find this DOF shader? Have the creators used some kind of editor to built this website or is is all hand coded? How would I go about getting similar text effect and 2d graphics inside the 3d canvas. What are your thoughts?

First time noobie poster. Anything will help! Thanks!

Submitted February 08, 2020 at 08:07PM by mirohristov
via reddit https://www.reddit.com/r/threejs/comments/f11uc4/what_is_this_dof_shader_and_how_are_these_effects/?utm_source=ifttt

I made over 40 animations (walk, run, attack w/ different weapons, etc). You can use them for free. View and download them here! via /r/threejs


I made over 40 animations (walk, run, attack w/ different weapons, etc). You can use them for free. View and download them here!
https://sketchfab.com/lexferreira89/collections/animations

Submitted August 02, 2019 at 06:52AM by lexferreira89
via reddit https://www.reddit.com/r/threejs/comments/cl33at/i_made_over_40_animations_walk_run_attack_w/?utm_source=ifttt

Electrical installation game prototype – made with Three.js some time ago :) via /r/threejs


Electrical installation game prototype – made with Three.js some time ago 🙂
https://youtu.be/0sOF1JA9WhI

Submitted July 22, 2019 at 12:02PM by HACKERMAN_FIN
via reddit https://www.reddit.com/r/threejs/comments/cgfuat/electrical_installation_game_prototype_made_with/?utm_source=ifttt

Bloom tint color mixed with skybox color = fog via /r/threejs


Bloom tint color mixed with skybox color = fog
https://oguzeroglu.github.io/ROYGBIV/demo/demo1/application.html

Submitted April 12, 2019 at 08:25AM by oguzeroglu
via reddit https://www.reddit.com/r/threejs/comments/bcdj9l/bloom_tint_color_mixed_with_skybox_color_fog/?utm_source=ifttt

How to raycast on tiles of a repeated texture? via /r/threejs


How to raycast on tiles of a repeated texture?

I'm very new to Threejs and 3d programming. I have some code that looks like this:

var material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, opacity: 0.5 }); var geometry = new THREE.PlaneGeometry(1, 1); var mesh = new THREE.Mesh(geometry, material); mesh.position.set(.5, .5, -1); var pointLight = new THREE.PointLight(0xFFFFFF); scene.add(mesh, pointLight); function onClick(event) { event.preventDefault(); console.log("click"); mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; raycaster.setFromCamera(mouse, camera); var intersects = raycaster.intersectObjects(scene.children); if (intersects.length) { intersects[0].face.color.set(0xff00); intersects[0].object.geometry.colorsNeedUpdate = true; } window.k=intersects; console.log(mouse.x, mouse.y, intersects); } document.addEventListener('mousedown', onClick, false); 

The goal is to raycast a tile on the plane and change its color when the mouse is clicked. Unfortunately, this doesn't work. The click event is happening and things are being raycasted, but I can't figure out how to change the color of the particular tile instead of the entire material.

I'd greatly appreciate any help, thank you!

Submitted March 25, 2019 at 10:18AM by _PM_ME_YOUR_ELBOWS
via reddit https://www.reddit.com/r/threejs/comments/b5coqu/how_to_raycast_on_tiles_of_a_repeated_texture/?utm_source=ifttt

Camera position and device controls using the waves example via /r/threejs


Camera position and device controls using the waves example

Hi r/threejs,

I have a website where i need to use threejs. I used the waves example in a landing page and it is working well on desktop/laptop.

However, I need to be able to move the waves (same behaviour as mouse in desktop) but with the device gyroscope/accelerometer and it is working using the devicecontrols that i found in another example. The problem is that it is my first time using three and working with 3d and i am lost. The dots are really small they only seem to move in a very small line and i dont know how or where the camera should look.

For example,

– Desired behaviour (https://www.dropbox.com/s/d11srwqww8jtuda/PhoneWanted.png?dl=0)

– Current on desktop (https://www.dropbox.com/s/x3rpcnovrfr2v1x/Desktop.png?dl=0)

– Current on mobile (https://www.dropbox.com/s/c9c1mojgi5zt55y/IMG_2385.jpeg?dl=0)

On mobile should look the same as on desktop and move the waves but only horizontally…

Is this possible?

Mobile Script

 if (screen && screen.width ` 

Thank you!

Submitted March 23, 2019 at 08:51PM by 0cean88
via reddit https://www.reddit.com/r/threejs/comments/b4rlsr/camera_position_and_device_controls_using_the/?utm_source=ifttt

Create a free website or blog at WordPress.com.

Up ↑