After configuring my code to render a geometry, I discovered that the geometry only appears on the screen when I include the following lines of code related to control:
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render );
controls.target = new THREE.Vector3(0, 0, 0);
If I attempt to remove these lines, the geometry disappears. Below is the complete code:
<html>
<head>
<title>3D Model Example</title>
<script src="Libraries/threejs/Three.js"></script>
<script src="Libraries/threejs/Detector.js"></script>
<script src="Libraries/threejs/BufferAttribute.js"></script>
<script src="Libraries/threejs/BufferGeometry.js"></script>
<script src="Libraries/threejs/EdgesHelper.js"></script>
<script src="Libraries/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()
{
// Setting up the scene
scene = new THREE.Scene();
// Camera configuration
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 setup
if (Detector.webgl) {
renderer = new THREE.WebGLRenderer({antialias: true});
}
else {
renderer = new THREE.CanvasRenderer();
}
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.autoClear = false;
// Adding renderer to the 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);
// Adding lights to the scene
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);
// Creating the geometry of the object
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>