59 Three.js 渲染两个场景和使用不同的相机,渲染在一个场景里面
2018-03-12 21:28
946 查看
前言
以前的时候没有试过,能不能把两个不同scene内的内容,渲染在同一个场景内呢?并且使用不同的相机?
实现
实现上面的疑问很简单,只要用renderer分别渲染两次即可,顺序如下:
首先,先渲染第一个
scene和
camera,
renderer.render(scene1, camera1);
然后,将
renderer的
autoClear属性设置为
false,这样,进行第二次渲染的时候,将不请客当前页面上的内容。
rederer.autoClear = false;
最后,再进行第二次渲染即可。
renderer.render(scene2, camera2);
案例地址和代码
案例地址:http://www.wjceo.com/blog/threejs/2018-03-12/117.html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html, body { margin: 0; height: 100%; } canvas { display: block; } </style> </head> <body onload="draw();"> </body> <script src="/lib/three.js"></script> <script src="/lib/js/libs/stats.min.js"></script> <script src="/lib/js/libs/dat.gui.min.js"></script> <script> var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setClearColor(new THREE.Color(0xffffff)); //设置背景颜色 renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } var camera,cameraOrtho; function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); camera.position.set(0, 0, 50); cameraOrtho = new THREE.OrthographicCamera(0, window.innerWidth, window.innerHeight, 0, -10, 10); } var scene,sceneOrtho; function initScene() { scene = new THREE.Scene(); sceneOrtho = new THREE.Scene(); } var light; function initLight() { scene.add(new THREE.AmbientLight(0x404040)); light = new THREE.DirectionalLight(0xffffff); light.position.set(1, 1, 1); scene.add(light); } function initModel() { //轴辅助 (每一个轴的长度) var object = new THREE.AxesHelper(500); //scene.add(object); //场景添加一个球型 var material = new THREE.MeshNormalMaterial(); var geom = new THREE.SphereGeometry(15, 200, 200); var mesh = new THREE.Mesh(geom, material); scene.add(mesh); } //获取纹理 var getTexture = function () { var texture = new THREE.ImageUtils.loadTexture("/lib/assets/textures/particles/sprite-sheet.png"); return texture; }; //初始化性能插件 var stats; function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } //生成gui设置配置项 var gui; function initGui() { //声明一个保存需求修改的相关数据的对象 gui = { "size": 50, "sprite": 0, "transparent": true, "opacity": 0.6, "color": 0xffffff, "rotateSystem": true, redraw: function () { sceneOrtho.children.forEach(function (child) { if (child instanceof THREE.Sprite) sceneOrtho.remove(child); }); createSprite(gui.size, gui.transparent, gui.opacity, gui.color, gui.sprite); } }; var datGui = new dat.GUI(); //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)gui.add(controls, 'size', 0, 10).onChange(controls.redraw); datGui.add(gui, 'sprite', 0, 4).step(1).onChange(gui.redraw); //step,保证每次数值更改为整数, datGui.add(gui, 'size', 0, 120).onChange(gui.redraw); datGui.add(gui, 'transparent').onChange(gui.redraw); datGui.add(gui, 'opacity', 0, 1).onChange(gui.redraw); datGui.addColor(gui, 'color').onChange(gui.redraw); gui.redraw(); } //创建精灵贴图的方法 function createSprite(size, transparent, opacity, color, spriteNumber) { var spriteMaterial = new THREE.SpriteMaterial({ opacity: opacity, color: color, transparent: transparent, map: getTexture() } ); // 图片上面有五张图片,我们只需要显示其中一张 spriteMaterial.map.offset = new THREE.Vector2(0.2 * spriteNumber, 0); spriteMaterial.map.repeat = new THREE.Vector2(1 / 5, 1); spriteMaterial.depthTest = false; spriteMaterial.blending = THREE.AdditiveBlending; var sprite = new THREE.Sprite(spriteMaterial); sprite.scale.set(size, size, size); sprite.position.set(1000, size/2, 0); sprite.velocityX = 5; sceneOrtho.add(sprite); } var step = 0; function render() { stats.update(); camera.position.y = Math.sin(step += 0.01) * 20; sceneOrtho.children.forEach(function (e) { if (e instanceof THREE.Sprite) { // move the sprite along the bottom e.position.x = e.position.x + e.velocityX; if (e.position.x > window.innerWidth) { e.velocityX = -5; gui.sprite ++; e.material.map.offset.set(1 / 5 * (gui.sprite % 4), 0); } if (e.position.x < 0) { e.velocityX = 5; } } }); renderer.render(scene, camera); renderer.autoClear = false; renderer.render(sceneOrtho, cameraOrtho); } //窗口变动触发的函数 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); cameraOrtho.right = window.innerWidth; cameraOrtho.top = window.innerHeight; cameraOrtho.updateProjectionMatrix(); render(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { render(); //更新性能插件 stats.update(); requestAnimationFrame(animate); } function draw() { initRender(); initScene(); initCamera(); initLight(); initModel(); initStats(); initGui(); animate(); window.onresize = onWindowResize; } </script> </html>
相关文章推荐
- Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景
- 在3D世界中创建不同的相机模式——创建一个Freelancer风格的相机:使用四元数的3D旋转
- 同 一个页面,不同请求路径,如何根据实际场景写JS
- 【three.js】创建一个场景
- 在使用JS编程中,有时需要在一个方法返回两个个或两个以上的数据
- 同一个账号启动两个resin而要求使用不同jdk的解决方法
- C# 在两个不同的方法里面Lock同一个锁对象,是否需要线程等待?
- 使用Three.js渲染Sketchup导出的dae
- 使用three.js加载3dmax资源,以及实现场景中的阴影效果
- 一个使用泛型堆栈模块创建的两个容纳不同类型数据的实例
- 20 Three.js实现场景所有物体使用相同的材质
- js 在一个页面两个submit 提交同一个form 到不同的action
- Three.JS学习 7:使用Canvas画一个时钟
- 第一个Three.js程序——动手写一个简单的场景
- 一个神奇的 NSPredicate, 过滤或者找出两个数组里面的对象的不同
- 在hibernate中同一个session里面有了两个相同标识但是是不同实体。
- Three.js / DOC (一) 创建一个场景
- Three.js使用OrbitControl重置相机
- Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景
- 使用three.js画一个三角形