144 lines
6.0 KiB
HTML
144 lines
6.0 KiB
HTML
<html>
|
|
|
|
<head>
|
|
|
|
<script src="three.js"></script>
|
|
<script src="OrbitControls.js"></script>
|
|
<script>
|
|
'use strict'
|
|
|
|
var renderer, scene, camera, orbitcontrols;
|
|
var pointLight, pointLightVisible = false;
|
|
var ambientLight, ambientLightVisible = false;
|
|
var hemisphereLight, hemisphereLightVisible = false;
|
|
var directionalLight, directionalLightVisible = false;
|
|
|
|
function draw() {
|
|
// create renderer attached to HTML Canvas object
|
|
var c = document.getElementById("canvas");
|
|
renderer = new THREE.WebGLRenderer({canvas: c, antialias: true});
|
|
|
|
// create the scenegraph
|
|
scene = new THREE.Scene();
|
|
|
|
// create a camera
|
|
var fov = 75;
|
|
var aspect = 600 / 600;
|
|
var near = 0.1;
|
|
var far = 1000;
|
|
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
|
|
camera.position.set(0, 0, 40);
|
|
|
|
orbitcontrols = new THREE.OrbitControls(camera, c);
|
|
orbitcontrols.enableDamping = true;
|
|
orbitcontrols.dampingFactor = 0.25;
|
|
orbitcontrols.enableZoom = true;
|
|
orbitcontrols.autoRotate = false;
|
|
|
|
// point light and wireframe marker to indicate position
|
|
pointLight = new THREE.PointLight(0xFFFFFF);
|
|
var wfMaterial = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2});
|
|
var markergeometry = new THREE.EdgesGeometry(new THREE.SphereGeometry(0.5, 10, 10));
|
|
var pointlightmarker = new THREE.LineSegments(markergeometry, wfMaterial);
|
|
pointLight.add(pointlightmarker);
|
|
pointLight.position.set(-10, 20, 0);
|
|
|
|
// ambient light and wireframe marker
|
|
ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2); // args: color, intensity
|
|
var ambientlightmarker = pointlightmarker.clone();
|
|
ambientLight.add(ambientlightmarker);
|
|
ambientLight.position.set(0, 20, 0); // position of ambientLight has no lighting effect, but does affect ambientlightmarker
|
|
|
|
// hemisphere light and wireframe marker
|
|
hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 0.3); // args: skyColor, groundColor, intensity
|
|
var hemispherelightmarker = pointlightmarker.clone();
|
|
hemisphereLight.add(hemispherelightmarker);
|
|
hemisphereLight.position.set(10, 20, 0); // position of hemisphereLight has no lighting effect, but does affect hemispherelightmarker
|
|
|
|
// directional light and wireframe marker
|
|
directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
|
|
var directionallightmarker = pointlightmarker.clone();
|
|
directionalLight.add(directionallightmarker);
|
|
directionalLight.position.set(-10, 15, 0);
|
|
directionalLight.target.position.set(10, 20, 0);
|
|
scene.add(directionalLight.target); // the target object must be in the scene
|
|
|
|
// args: radius, widthSegments, heightSegments
|
|
// FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
|
|
var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading: true});
|
|
var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), material1);
|
|
sphere1.position.set(-20, 0, 0);
|
|
scene.add(sphere1);
|
|
|
|
// SMOOTH SHADING is the default setting for MeshLambertMaterial
|
|
var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), new THREE.MeshLambertMaterial({color: 0xffff00}));
|
|
sphere2.position.set(0, 0, 0);
|
|
scene.add(sphere2);
|
|
|
|
// NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial
|
|
var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), new THREE.MeshPhongMaterial({color: 0x0000ff}));
|
|
sphere3.position.set(20, 0, 0);
|
|
scene.add(sphere3);
|
|
|
|
// the "ground"
|
|
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00}));
|
|
scene.add(box);
|
|
box.position.set(0, -15, 0);
|
|
|
|
animate();
|
|
}
|
|
|
|
function animate() {
|
|
setTimeout(animate, 1000 / 60);
|
|
|
|
orbitcontrols.update();
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
function togglePointLight() {
|
|
pointLightVisible = !pointLightVisible;
|
|
if (pointLightVisible)
|
|
scene.add(pointLight);
|
|
else
|
|
scene.remove(pointLight);
|
|
}
|
|
|
|
function toggleAmbientLight() {
|
|
ambientLightVisible = !ambientLightVisible;
|
|
if (ambientLightVisible)
|
|
scene.add(ambientLight);
|
|
else
|
|
scene.remove(ambientLight);
|
|
}
|
|
|
|
function toggleHemisphereLight() {
|
|
hemisphereLightVisible = !hemisphereLightVisible;
|
|
if (hemisphereLightVisible)
|
|
scene.add(hemisphereLight);
|
|
else
|
|
scene.remove(hemisphereLight);
|
|
}
|
|
|
|
function toggleDirectionalLight() {
|
|
directionalLightVisible = !directionalLightVisible;
|
|
if (directionalLightVisible)
|
|
scene.add(directionalLight);
|
|
else
|
|
scene.remove(directionalLight);
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="draw();">
|
|
<canvas id="canvas" width="600" height="600"></canvas>
|
|
<div style="position:absolute; left:20px; top:20px;">
|
|
<button onclick="togglePointLight();">PointLight</button>
|
|
<button onclick="toggleAmbientLight();">AmbientLight</button>
|
|
<button onclick="toggleHemisphereLight();">HemisphereLight</button>
|
|
<button onclick="toggleDirectionalLight();">DirectionalLight</button>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|