如何在Three.js中实现多场景（scene）绘制

多个scene的绘制通常用于：1个作为辅助的背景场景（一些静态背景元素，如加载背景图片），一个作为主场景用来处理交互动画。本例演示了如何创建这样的应用。适用于创建VR应用。

three, background, image

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 12402
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var color = 0x000000;

// Create your main scene
var scene = new THREE.Scene();

// Create your main camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Create lights
var light = new THREE.PointLight(0xEEEEEE);
light.position.set(20, 0, 20);
scene.add(light);

var lightAmb = new THREE.AmbientLight(0x777777);
scene.add(lightAmb);

// Create your renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a cube
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshLambertMaterial({
    color: 0xff00ff,
    ambient: 0x121212,
    emissive: 0x121212
});

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Set up the main camera
camera.position.z = 5;

// Load the background texture
var texture = THREE.ImageUtils.loadTexture('/uploads/160701/beach.jpg');
var backgroundMesh = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 2, 0),
    new THREE.MeshBasicMaterial({
        map: texture
    }));

backgroundMesh.material.depthTest = false;
backgroundMesh.material.depthWrite = false;

// Create your background scene
var backgroundScene = new THREE.Scene();
var backgroundCamera = new THREE.Camera();
backgroundScene.add(backgroundCamera);
backgroundScene.add(backgroundMesh);

// Rendering function
var render = function() {
    requestAnimationFrame(render);

// Update the color to set
    if (color < 0xdddddd) color += 0x0000ff;

// Update the cube color
    cube.material.color.setHex(color);

// Update the cube rotations
    cube.rotation.x += 0.05;
    cube.rotation.y += 0.02;

renderer.autoClear = false;
    renderer.clear();
    renderer.render(backgroundScene, backgroundCamera);
    renderer.render(scene, camera);
};

render();

编译

CSS

HTML

多个scene的绘制通常用于：1个作为辅助的背景场景（一些静态背景元素，如加载背景图片），一个作为主场景用来处理交互动画。本例演示了如何创建这样的应用。适用于创建VR应用。

three, background, image

编辑器支持Emmet

快捷键

多个scene的绘制通常用于：1个作为辅助的背景场景（一些静态背景元素，如加载背景图片），一个作为主场景用来处理交互动画。本例演示了如何创建这样的应用。适用于创建VR应用。

three, background, image

学习如何用Three.js和React将三维空间中的SVG分离出来并把3D场景分解为可重用组件

three.js如何实现一个搭积木小游戏（代码详解）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：