three.js

Switch lighting of THREE.MeshPhongMaterial on / off dynamically

由 狂风中的少年 提交于 2019-12-25 02:58:17
问题 I wonder if there is a way to turn off the lighting from a MeshPhongMaterial on runtime. I'm working on a scene with big distances between the meshes and because of this it's impossible to work with the implemented shadow of three.js. So now I wanna try to turn off the light on a certain object, when it's behind another, which I'll determine by ray collision. In the next step it would be nice to ease in and out, instead of just switching the light off. Any hints? Thank you in advance! 来源：

How do I make an object perpendicular to a face with Three.js?

由 瘦欲@ 提交于 2019-12-25 02:57:48
问题 Relevant codepen: http://codepen.io/OpherV/pen/yNebep In my game I have a model of an alien tree. For each face of this tree I generate a pyramid ( CylinderGeometry with 4 faces), and position it at the center of the face. Then I wish for this pyramid to be perpendicular to the face, so that I'll get a tree with spikes. I've tried achieving this with object.lookAt and point it at the face normal, but weird things happen. For example: If I add cylinderGeometry.applyMatrix( new THREE.Matrix4()

Is there a plugin to add rotation to three.js self-learning project?

由 白昼怎懂夜的黑 提交于 2019-12-25 02:50:12
问题 I'm starting to play with three.js and was wondering if there's a simple plugin to add the trackball functionality so I can see how the changes I'm making in code is affecting the "underside" of the simple object. I tried to follow: http://mrdoob.github.com/three.js/examples/misc_controls_trackball.html But I'm getting a lot of EventDispatcher errors. By try, I mean I've: added "TrackballControls.js" added "Detector.js" added this bit of code: if ( ! Detector.webgl ) Detector

ThreeJS: Best approach to create an animated 2d segmented donut/ring

由 我的未来我决定 提交于 2019-12-25 02:40:24
问题 This is the object I'm using to create a donut with segments that can be animated. There is a method to pass in an array of values to update the segments which then "tweens" to the new values by recreating the widget a bunch of times. UPDATE 12/21 This method is causing a memory leak/garbage collection issues. Is there a more performant/efficient method to accomplishing this? The memory leak was a seperate issue that was resolved. This post is primarily about finding a more efficient way to

three.js TextGeometry: text alignment gets messed up after re-setting the rotation

由 a 夏天 提交于 2019-12-25 02:28:10
问题 I have created a THREE. TubeGeometry and using the THREE.TextGeometry added the text to the tube created. The tube is then added to scene. Also the I have set the text rotation to camera rotation. The code snippet is below text.rotation = camera.rotation; text.lookAt(camera.position); My application has a button by which I can reset the original position of my tube geometry. Internally, this is done by reseting the camera to its originally position. Initially, when the page loads up, the tube

Three.js: Cast LightShadow to ShadowMaterial

由 依然范特西╮ 提交于 2019-12-25 01:52:46
问题 I want to capture the shadow created by a PointerLight to a ShadowMaterial. A MeshPhongMaterial will capture the shadow of the PointerLight but a ShadowMaterial will only capture shadows from objects that are in the scene. Is this possible? 来源： https://stackoverflow.com/questions/54000003/three-js-cast-lightshadow-to-shadowmaterial

How to incorporate a “moving” background in THREE.js

由 主宰稳场 提交于 2019-12-25 01:34:38
问题 I cam across this site: https://travisscott.com/ As you can see, when you move the camera, the gradient background has different 360 degree shading. What part of THREE.js would something like this be part of? Can someone point me in the right direction? 回答1: As @gaitat said in their comment above- the background is a cube map wrapped in a sphere. This is just a normal three.js material with a texture map applied. Here is the code from the page cleaned up to be readable: var backgroundSphere =

Three.js Why renderer with viewport & scissor and I have a complete black canvas

由 一世执手 提交于 2019-12-25 01:13:00
问题 I have a typical UI - two vertical windows. The left for the canvas & renderer, the right for the UI. Inside this UI I will have special viewers, for example a simple top view window. I have used the viewports && scissors approach. All works fine. The question is that I miss some special parameter to avoid the complete canvas black-filled that covers all I have (my UI) behind. I expected that viewport & scissors were going to let me have 'clean' areas (not filled) inside my canvas. But not...

Why is there an error, “Uncaught TypeError: undefined is not a function”?

由 只谈情不闲聊 提交于 2019-12-25 00:34:43
问题 I looked for mismatched braces, but still not able to figure out why the error shows for the line: lab3.init($('#viewport')); in the HTML. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Graphics Lab</title> <script src="js/graphics.js"></script> <!-- Bootstrap core CSS -->

Three.js smoke animation with transparent background

由 五迷三道 提交于 2019-12-25 00:27:03
问题 I'm completely new to three.js, I'd like the smoke canvas to on top of the image to have a transparent background. the canvas sits behind the image at the moment, that's why I have this css below. canvas{ position: absolute; z-index: 2; top:0px; left: 0; } I don't understand how to remove or to make the black background of the canvas transparent. Please have a look at my demo below https://codepen.io/davide77/pen/GxZgZB?editors=1010 回答1: If you need a transparent background you can pass in
订阅 three.js