我做了一个基本配置来渲染几何图形，但我注意到只有当我将这行关于控制的代码放入代码中时才会渲染:
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render );
controls.target = new THREE.Vector3(0, 0, 0);
如果我尝试删除这条线，几何图形将不可见。整个代码如下:
<html>
<head>
<title>MVC - example</title>
<script src="Stereos/threejs/Three.js"></script>
<script src="Stereos/threejs/Detector.js"></script>
<script src="Stereos/threejs/BufferAttribute.js"></script>
<script src="Stereos/threejs/BufferGeometry.js"></script>
<script src="Stereos/threejs/EdgesHelper.js"></script>
<script src="Stereos/threejs/OrbitControls.js"></script>
</head>
<body>
<p id="stats"></p>
<div id='maincanvas' style="border: 1px solid black; width: 500px; height: 500px"></div>
<input type="button" onClick="test()" value="test"/>
<input type="button" onClick="render()" value="render"/>
<script type="text/javascript">
var container, testbox, scene, camera, renderer, controls, scene_text, raycaster, projector, mouse2D;
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth - 5, SCREEN_HEIGHT = window.innerHeight - 5;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20;
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
var r = 4, phi = Math.PI / 4, theta = Math.PI / 4;
camera.position.set(r * Math.cos(phi) * Math.sin(theta), r * Math.sin(phi), r * Math.cos(phi) * Math.cos(theta));
// RENDERER
if (Detector.webgl) {
renderer = new THREE.WebGLRenderer({antialias: true});
}
else {
renderer = new THREE.CanvasRenderer();
}
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.autoClear = false;
// CONTAINER
container = document.getElementById('maincanvas');
container.appendChild(renderer.domElement);
// controls = new THREE.OrbitControls(camera, renderer.domElement);*** if remove controls geometry is not visible
// controls.addEventListener('change', render );
// controls.target = new THREE.Vector3(0, 0, 0);
// LIGHTS
var light1 = new THREE.PointLight(0xffffff);
light1.position.set(0, 1000, 1000);
scene.add(light1);
var light2 = new THREE.PointLight(0xffffff);
light2.position.set(0, -1000, -1000);
scene.add(light2);
/////////////
// OBJECTS //
/////////////
geometry0 = new THREE.Geometry();
geometry0.vertices = [new THREE.Vector3(0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, -0.5), new THREE.Vector3(0.5, -0.5, -0.5),
new THREE.Vector3(0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, -0.5), new THREE.Vector3(0.5, 0.5, -0.5)];
geometry0.faces =
[new THREE.Face3(3, 2, 1), new THREE.Face3(3, 1, 0), new THREE.Face3(4, 5, 6), new THREE.Face3(4, 6, 7), new THREE.Face3(0, 1, 5), new THREE.Face3(0, 5, 4),
new THREE.Face3(1, 2, 6), new THREE.Face3(1, 6, 5), new THREE.Face3(2, 3, 7), new THREE.Face3(2, 7, 6), new THREE.Face3(3, 0, 4), new THREE.Face3(3, 4, 7)];
geometry0.computeFaceNormals();
geometry0.computeVertexNormals();
var material0 = new THREE.MeshBasicMaterial({ color: 0xD1740A, transparent: true, opacity: 0.5 });
mesh0 = new THREE.Mesh(geometry0, material0);
scene.add(mesh0);
egh0 = new THREE.EdgesHelper(mesh0, 0x000);
egh0.material.linewidth = 2;
scene.add(egh0);
}
function render()
{
renderer.clear();
renderer.render(scene, camera);
}
function test()
{
init();
render();
}
</script>
</body>
</html>
最佳答案
简单来说，您的相机位置设置不正确，因此它看向其他地方。目前你的物体的位置是(0,0,0)，所以你应该看向正确的方向，你就会看到你的物体。
你需要看看类似的地方:
camera.position.set(0,0,10);
除此之外，出于动画目的，您需要在渲染函数末尾添加以下代码。但如果您没有任何动画，可以忽略它:
requestAnimationFrame(render);
关于javascript - Threejs基本渲染问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29170396/