three.js 相关问题

Three.js是一个轻量级的跨浏览器JavaScript库/ API，用于在Web浏览器上创建和显示动画3D计算机图形。 Three.js脚本可以与HTML5 canvas元素，SVG或WebGL结合使用。

{ “进口”：{ “三”：“https://unpkg.com/ [email protected]/build/ Three.module.js”， “三/</desc> <question vote="0"> <pre><code><script type="importmap"> { "imports": { "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" data-cfemail="a4d0ccd6c1c1e4d2948a9592968a94">[email protected]</a>/build/three.module.js", "three/addons/": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" data-cfemail="d5a1bda7b0b095a3e5fbe4e3e7fbe5">[email protected]</a>/examples/jsm/" } } </script> <script type="module"> import * as THREE from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 10; camera.position.x = -5; const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const geometry = new THREE.BoxGeometry( 2, 2, 2 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); const cube = new THREE.Mesh( geometry, material ); scene.add( cube ); material.opacity = 0.2; material.transparent = true; function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate(); </script> </code></pre> <p>以上工作，立方体的不透明度正在改变，但如果移动<pre><code>material</code></pre>更新到setTimeout函数，如：</p> <pre><code>// material.opacity = 0.2; // material.transparent = true; var tmout = function() { material.opacity = 0.2; material.transparent = true; } setTimeout(tmout, 1000 ); </code></pre> <p>那么不透明度不会改变。为什么 <pre><code>material</code></pre> 在 setTimeout 内没有改变？这里有什么不正确的吗？</p> </question> <answer tick="false" vote="0"> <p>使用箭头函数从调用模块内捕获 this 的上下文。 ́\<em>(ツ)</em>/́</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>import * as THREE from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 10; camera.position.x = -5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(2, 2, 2); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); material.opacity = 1; material.transparent = true; function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); setTimeout(() => { this.material.opacity = 0.2; this.material.transparent = true; }, 1000); } animate();</code></pre> </div> </div> <p></p> </answer> </body></html>

javascript three.js

回答 0 投票 0

为什么我加载有材质的 GLTF 模型时得到的是黑色模型？

我正在尝试加载具有glb 格式的3D 模型。这是代码：我除了什么：图像我有什么：图片 var renderer = new THREE.WebGLRenderer(); 渲染器.setSize(1000, 1000); 渲染器。

javascript html web three.js gltf

回答 1 投票 0

Blender 模型在 THREE.js 中看起来完全不同

我想在我的网站上使用一个 Blender 模型，我在其中使用 THREE.js，但是当我加载 GLTF 文件时，它看起来损坏了。东西丢失或位置错误，灯光也似乎......

javascript reactjs three.js blender

回答 1 投票 0

ExtrudeBufferGeometry 导致输出旋转

我正在尝试挤出一些形状，但是我发现挤出后，输出看起来像是旋转了一点。我渲染了三角形的实际形状和挤压形状......