<!DOCTYPE html>
<html>
<head>
<title>demo5</title>
<script src="three.min.js"></script>
<script src="TrackballControls.js"></script>
</head>
<body>
<script type="text/javascript">
var renderer;
var scene;
var camera;
var controls;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = -30;
camera.position.y = 30;
camera.position.z = 20;
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xcfcfcf, 1.0));
renderer.setSize(window.innerWidth-20, window.innerHeight-20);
renderer.shadowMapEnabled = true;
container.appendChild(renderer.domElement);
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.minDistance = 30;
controls.maxDistance = 100;
var geometry1 = new THREE.Geometry();
geometry1.vertices = [new THREE.Vector3(0, 10, 6),
new THREE.Vector3(-1, -5, -14),
new THREE.Vector3(-2, -3, 5)];
geometry1.faces.push(new THREE.Face3(0, 1, 2));
var material1 = new THREE.MeshBasicMaterial({ color: 0xff8000 });
var mesh1 = new THREE.Mesh(geometry1, material1);
var geometry2 = new THREE.Geometry();
geometry2.vertices = [new THREE.Vector3(0, 10, 6),
new THREE.Vector3(-2, -3, 5),
new THREE.Vector3(1, 2, 10)];
geometry2.faces.push(new THREE.Face3(0, 1, 2));
var material2 = new THREE.MeshBasicMaterial({ color: 0x13ff00 });
var mesh2 = new THREE.Mesh(geometry2, material2);
var geometry3 = new THREE.Geometry();
geometry3.vertices = [new THREE.Vector3(0, 10, 6),
new THREE.Vector3(1, 2, 10),
new THREE.Vector3(8, 7, 14)];
geometry3.faces.push(new THREE.Face3(0, 1, 2));
var material3 = new THREE.MeshBasicMaterial({ color: 0x32a2d2 });
var mesh3 = new THREE.Mesh(geometry3, material3);
scene.add(mesh1);
scene.add(mesh2);
scene.add(mesh3);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
</script>
</body>
</html>
请问我该怎么设置光源使图形显示出3D效果，
1 个解决方案
#1
up
#1
up