Three.js中帶有線框的多維數據集
[英]Cube with wireframe in three.js
問題描述
我是three.js的新手，而Javascript是新手。 我在Threejs.org （旋轉的多維數據集）上進行了“入門”項目，沒有任何麻煩。 但是，當我嘗試添加線框時，該項目停止工作。
您能幫我找出問題所在嗎？ 該代碼段如下。
謝謝！
<html> <head> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="http://threejs.org/build/three.min.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); object = new THREE.Mesh( geometry, material ); wireframe = new THREE.WireframeHelper( object, 0x00ff00 ); scene.add( object ); scene.add( wireframe ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.05; cube.rotation.y += 0.05; renderer.render(scene, camera); }; render(); </script> </body> </html>
1 個解決方案
解決方案1
1 已采納 2016-01-02 01:49:11
您只需要更新變量名，當您將其更改為object時，仍然在渲染循環中引用了cube 。 您是否檢查過JavaScript控制台中的錯誤？ 我也將相機移回了相機，使其不在立方體內。
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); object = new THREE.Mesh( geometry, material ); wireframe = new THREE.WireframeHelper( object, 0x00ff00 ); scene.add( object ); scene.add( wireframe ); camera.position.z = 15; var render = function () { requestAnimationFrame( render ); object.rotation.x += 0.05; object.rotation.y += 0.05; renderer.render(scene, camera); }; render();
html, body, canvas { margin: 0; padding: 0; display: block; width: 100%; height: 100% }
<html> <head> <title>My first Three.js app</title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script> </body> </html>
Three.js：使用 RawShaderMaterial 渲染 LineSegments 線框
[英]Three.js: Rendering LineSegments Wireframe with RawShaderMaterial
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.