three.js

问题 In my project, using Three.JS I have implemented the functionality where I want my camera to zoom to the cursor position. Below is the function for that. In this function, I am using a factor as static value 5. onWheelMove = (event: WheelEvent): void => { let rect: ClientRect = this.canvas.getBoundingClientRect(); var factor = 5; this.mousePos.x = (event.clientX - rect.left) / this.renderer.domElement.width * 2 - 1; this.mousePos.y = -(event.clientY - rect.top) / this.renderer.domElement

问题 In my project, using Three.JS I have implemented the functionality where I want my camera to zoom to the cursor position. Below is the function for that. In this function, I am using a factor as static value 5. onWheelMove = (event: WheelEvent): void => { let rect: ClientRect = this.canvas.getBoundingClientRect(); var factor = 5; this.mousePos.x = (event.clientX - rect.left) / this.renderer.domElement.width * 2 - 1; this.mousePos.y = -(event.clientY - rect.top) / this.renderer.domElement

问题 I want to rotate a cube on world axis by using tween.I am able to rotate the cube around world axis without using tween by using rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(90)); but I want to happen this slowly so I want to use it with tween. I was using var start = {x:cube[1].rotation.x, y:cube[1].rotation.y, z:cube[1].rotation.z}; var end = {x:cube[1].rotation.x , y:cube[1].rotation.y+degreeToRadians(90) , z:cube[1].rotation.z}; var tween = new TWEEN.Tween(start

问题 created the sphere and the plane geometry when i ignore the sphere form scene.add() interesect work but here is the code.. http://jsfiddle.net/praveenv29/PZeY4/ for ( var i = 0; i<10; i ++ ) { var gloom = new THREE.ImageUtils.loadTexture('../map_pin.png' ); materialr = new THREE.MeshLambertMaterial( { color:Math.random() * 0xffffff ,side: THREE.DoubleSide} ) var geometry = new THREE.PlaneGeometry(10,15,2, 2); var object = new THREE.Mesh(geometry, materialr); object.position.x = Math.random()

问题 The issue: Subtracting a cube from a sphere provides a result where the z axis retains volume, but the y and x axis produce flat disks, as show in the image. I am not sure why the sphere is losing volume on those sides. I am using a typical subtract with threeCSG. Code: var geometry = new THREE.CubeGeometry( 100, 100, 100 ); var material = new THREE.MeshLambertMaterial( {color: 0xff0000, side: THREE.DoubleSide, transparent:true, opacity: .5} ); var cutter = new THREE.Mesh( geometry, material

问题 The issue: Subtracting a cube from a sphere provides a result where the z axis retains volume, but the y and x axis produce flat disks, as show in the image. I am not sure why the sphere is losing volume on those sides. I am using a typical subtract with threeCSG. Code: var geometry = new THREE.CubeGeometry( 100, 100, 100 ); var material = new THREE.MeshLambertMaterial( {color: 0xff0000, side: THREE.DoubleSide, transparent:true, opacity: .5} ); var cutter = new THREE.Mesh( geometry, material

问题 I'm trying to make an object keep looking at the mouse in a natural-ish way. So far, i've managed to make the object look at the mouse at all times add an easing to make in more natural The problem is now that the object doesn't follow the same path as the mouse but always takes the last position to ease to. I'm not sure how to approach this. // create object and add to scene const sphere = new THREE.Mesh( geometry, material ); const origin = new THREE.Vector3(0, 0, 75); sphere.position.x = 0

问题 I'm trying to make an object keep looking at the mouse in a natural-ish way. So far, i've managed to make the object look at the mouse at all times add an easing to make in more natural The problem is now that the object doesn't follow the same path as the mouse but always takes the last position to ease to. I'm not sure how to approach this. // create object and add to scene const sphere = new THREE.Mesh( geometry, material ); const origin = new THREE.Vector3(0, 0, 75); sphere.position.x = 0

问题 I have switched from using THREE.Sprite to THREE.Points for my POI, but now I am facing two issues. As you can see on the screenshots, each point has a unique png image as a texture, but now a transparent part of the point is covering other points. Main object could be seen through the points, but other points are occluded. And the other problem, raycasting for mouseover (the green colored point) works weird. When a scene is loaded and no camera move has been done, it works ok. But when I

问题 Helo, here's part of my code - earth globe :) function createGlobe(){ var normalMap = THREE.ImageUtils.loadTexture("images/earth_normal_2048.jpg"); var surfaceMap = THREE.ImageUtils.loadTexture("images/earth_surface_2048.jpg"); var specularMap = THREE.ImageUtils.loadTexture("images/earth_specular_2048.jpg"); var shader = THREE.ShaderLib["phong"]; var uniforms = THREE.UniformsUtils.clone(shader.uniforms); uniforms["tNormal"] = {type:"t", value:normalMap}; uniforms["tDiffuse"] = {type:"t",