0
我是three.js的新手,我有一個基本的攪拌機場景,我也命名了兩個不同的網格。我已經設法將網格導入三個,但我想知道如何引用和操作每個網格?如果2個網格在同一個文件中,或者我應該加載mesh1.js,mesh2.js等,可能嗎?三個js - 在進口攪拌機場景中引用單個網格
這是代碼:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;
init();
animate();
// Sets up the scene.
function init() {
// Create the scene and set the scene size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Create a camera, zoom it out from the model a bit, and add it to the scene.
camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 0.1, 20000);
camera.position.set(0,6,0);
scene.add(camera);
// Create an event listener that resizes the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH/HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene.
renderer.setClearColorHex(0x333F47, 1);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,-200,100);
scene.add(light);
var light2 = new THREE.PointLight(0xffffff);
light2.position.set(-100,200,100);
scene.add(light2);
// Load in the mesh and add it to the scene.
var loader = new THREE.JSONLoader();
loader.load("tree-land.js", function(geometry, materials){
var material = new THREE.MeshFaceMaterial(materials);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
// Renders the scene and updates the render as needed.
function animate() {
requestAnimationFrame(animate);
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>