59 Three.js 渲染两个场景和使用不同的相机，渲染在一个场景里面

前言

以前的时候没有试过，能不能把两个不同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 bottome.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>

59 Three.js 渲染两个场景和使用不同的相机，渲染在一个场景里面相关推荐

js修改背景图片路径_前端面试题————关键渲染路径（Critical Rendering Path）...
前端面试,总是会被问到这样一类问题: 为什么最好把 CSS 的<link>标签放在<head></head>之间?为什么最好把 JS 的<script> ...
keyshot场景素材导入_Keyshot怎么导入Rhino室内场景渲染?
Keyshot是工业设计渲染比较常用的软件,因为操作简便,受到很多人的青睐.但并不太适合做室内表现,因为布光相对要麻烦一些.但如果你对其它渲染器不甚了解,用Rhino制作了室内场景,也是可以使用Key ...
js保留两位小数方法总结
js保留两位小数方法总结最近在做结算系统,经常需要用到金额保留两位小数,刚开始我一直用的是Angular中的过滤器number |2,但是,这无法满足我的需求.问题是,当用户离开文本框时,我需要将用 ...
js合并两个json对象
js把两个对象合并成一个对象文章目录 js把两个对象合并成一个对象前言一.使用Object.assign()解决该问题 1.方法介绍 2.语法二.示例 1.复制对象 2.合并对象 3.合并具有 ...
JS中有两种自加法操作
JS中有两种自加法操作.它们的运算符是++,它们的函数是向1添加运算符. 我和我的区别在于操作的顺序和组合的方向. 其中: ++var被称为预自动添加,变量执行自动添加操作后.它的操作是先执行自动加法 ...
js中两个对象的比较
代码取自于underscore.js 1.8.3的isEqual函数. 做了一些小小的修改,主要是Function的比较修改. 自己也加了一些代码解读. <!DOCTYPE html> & ...
js重新渲染div_前端工程师必备：从浏览器的渲染到性能优化
文章来自:华为云开发者社区摘要:本文主要讲谈及浏览器的渲染原理.流程以及相关的性能问题. 问题前瞻 1. 为什么css需要放在头部? 2. js为什么要放在body后面? 3. 图片的加载和渲染会阻 ...
探讨JS合并两个数组的方法
转载自探讨JS合并两个数组的方法我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况. 比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需 ...
js删除两个集合中共同元素_多个集合中的共同和独特元素
js删除两个集合中共同元素本周,我们将暂时中断较高级别的问题和技术文章,以解决我们中许多人可能面临的一些代码问题. 没什么花哨的或太辛苦的,但是有一天它可能会节省您15分钟的时间,偶尔回到基础上也很 ...

59 Three.js 渲染两个场景和使用不同的相机，渲染在一个场景里面

前言

实现

案例地址和代码

59 Three.js 渲染两个场景和使用不同的相机，渲染在一个场景里面相关推荐

最新文章

热门文章