THREE.JS: How can I disable the dragControls after activating them on group of elements?
来源： https://stackoverflow.com/questions/54325520/three-js-how-can-i-disable-the-dragcontrols-after-activating-them-on-group-of-e
three.js
Change color of mesh using mouseover in three js
问题 I've put together a WebGL script that displays several meshes using jsonloader and three.js and I now want to add MouseOver and onClick events. The first of these is simply changing the colour of the mesh when the mouse hovers over it: function render() { requestAnimationFrame(render); mesh.rotation.z += 0.090; raycaster.setFromCamera(mouse, camera); var intersects = raycaster.intersectObjects(scene.children); for (var i = 0; i < intersects.length; i++) { intersects[i].object.material.color
How do I clear THREE.JS Scene
问题 I am trying to find ways of clearing all the objects in a scene without destroying the scene itself. I know that naming the object is one way and then when we want to delete the object, we just "get" it by its name. However, I want to find a quick way to clear a scene of all the objects in it, regardless of their names. Is there a easy way to do it? Thanks! 回答1: You can traverse the child objects of the scene and remove them one by one. scene.children.forEach(function(object){ scene.remove
What happened to THREE.ImageUtils?
问题 Working on updating some old javascript three.js code on textures. Specifically the second line below. var groundColor = new THREE.Color(0xd2ddef); var groundTexture = new THREE.ImageUtils().generateDataTexture(1, 1, groundColor); // this line var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111, map: groundTexture }); var groundTexture = new THREE.TextureLoader().load('img/ground.jpg', undefined, function() { groundMaterial.map = groundTexture });
What happened to THREE.ImageUtils?
问题 Working on updating some old javascript three.js code on textures. Specifically the second line below. var groundColor = new THREE.Color(0xd2ddef); var groundTexture = new THREE.ImageUtils().generateDataTexture(1, 1, groundColor); // this line var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111, map: groundTexture }); var groundTexture = new THREE.TextureLoader().load('img/ground.jpg', undefined, function() { groundMaterial.map = groundTexture });
What happened to THREE.ImageUtils?
问题 Working on updating some old javascript three.js code on textures. Specifically the second line below. var groundColor = new THREE.Color(0xd2ddef); var groundTexture = new THREE.ImageUtils().generateDataTexture(1, 1, groundColor); // this line var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111, map: groundTexture }); var groundTexture = new THREE.TextureLoader().load('img/ground.jpg', undefined, function() { groundMaterial.map = groundTexture });
three.js 几何体（三）
上一篇介绍了几何体的构造体参数，这篇郭先生就接着上一篇说。 1. ExtrudeGeometry挤压几何体 挤压几何体允许我们从一条形状路径中，挤压出一个Geometry。ExtrudeGeometry有两个参数，第一个参数是一个图形，第二个参数是它的配置 var shape = new THREE.Shape(); shape.moveTo( 0, 1.5 ); shape.bezierCurveTo( 2, 3.5, 4, 1.5, 2, -0.5 ); shape.lineTo( 0, -2.5 ); shape.lineTo( -2, -0.5 ); shape.bezierCurveTo( -4, 1.5, -2, 3.5, 0, 1.5 ); var extrudeSettings = { steps: 2, // 用于沿着挤出样条的深度细分的点的数量，默认值为1 depth: 0.3, // 挤出的形状的深度，默认值为100 bevelEnabled: true , // 对挤出的形状应用是否斜角，默认值为true bevelThickness: 0.3, // 设置原始形状上斜角的厚度。默认值为6 bevelSize: 0.5, // 斜角与原始形状轮廓之间的延伸距离 bevelSegments: 2, // 斜角的分段层数，默认值为3 curveSegments:
Limiting framerate in Three.js to increase performance, requestAnimationFrame?
问题 I was thinking that for some projects I do 60fps is not totally needed. I figured I could have more objects and things that ran at 30fps if I could get it to run smoothly at that framerate. I figured if I edited the requestAnimationFrame shim inside of three.js I could limit it to 30 that way. But I was wondering if there was a better way to do this using three.js itself as provided. Also, will this give me the kind of performance increase I am thinking. Will I be able to render twice as many
Limiting framerate in Three.js to increase performance, requestAnimationFrame?
问题 I was thinking that for some projects I do 60fps is not totally needed. I figured I could have more objects and things that ran at 30fps if I could get it to run smoothly at that framerate. I figured if I edited the requestAnimationFrame shim inside of three.js I could limit it to 30 that way. But I was wondering if there was a better way to do this using three.js itself as provided. Also, will this give me the kind of performance increase I am thinking. Will I be able to render twice as many
详解Canvas动画部分
基础篇： Html5中Canvas绘制、样式详解（不包含动画部分） 此篇为后续 目录 1. 状态的保存和恢复 2. translate移动 3. 旋转Rotating 4. 缩放Scaling 5. 图形相互交叉显示规则 6. 裁切路径 7. 动画基本步骤 8. canvas相关的动画js框架 1.状态的保存和恢复 save() 保存画布(canvas)的所有状态 restore() save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。 Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括： 当前应用的变形（即移动，旋转和缩放，见下） 以及下面这些属性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled