无法将 PlaneGeometry 加入到 Camera

来源:6-20 threejs场景增加背景和地面

qq_Mel_0

2018-11-12

如果加入到 scene 中,是能够显示出来的,但是加入到 camera 中 无法显示 背景还是一片漆黑
一下是代码片段:
//初始化相机

const aspect = window.innerHeight / window.innerWidth;
this.camera = new THREE.OrthographicCamera(
    -sceneConf.width,
    sceneConf.width,
    sceneConf.width * aspect,
    -sceneConf.width * aspect,
    -100, 100
);
this.camera.position.set(-10, 10, 10);
this.camera.lookAt(new THREE.Vector3(0, 0, 0));

//初始化 Scene

this.scene = new THREE.Scene();
let axesHelper = new THREE.AxesHelper(200);
this.scene.add(axesHelper);

this.scene.add(new THREE.AmbientLight(0xffffff, 0.8));//环境光

let shadowLight = new THREE.DirectionalLight(0xffffff, 0.3);//平行光
shadowLight.position.set(10, 30, 20);
let shadowTarget = new THREE.Mesh(new THREE.PlaneGeometry(0.1, 0.1),
    new THREE.MeshBasicMaterial({color: 0xF5F5F5}));//ShadowLight的照射目标
shadowTarget.visible = false;
shadowTarget.name = 'shadowTarget';
shadowLight.target = shadowTarget;

this.scene.add(shadowLight);
this.scene.add(shadowTarget);

//添加 background

const aspect = this.HEIGHT / this.WIDTH;
let geometry = new THREE.PlaneGeometry(
    sceneConf.width * 2,
    sceneConf.width * aspect * 2
);
let material = new THREE.MeshBasicMaterial({
    color: 0xd7dbe6,
    opacity: 1,
    transparent: true,
    side: THREE.DoubleSide
});
let background = new THREE.Mesh(geometry, material);
this.camera.add(background); //如果添加到 scene 上,是能够看到的
background.position.set(0, 0, -85);
this.background = background;
写回答

4回答

慕工程053222

2019-05-03

请问你这个问题解决了么

0
0

qq_Mel_0

提问者

2018-12-03

看到您的回复了,等我把基础的学完再过来试试 :)

0
0

千迦

2018-11-21

代码逻辑看上去没有什么问题,是不是因为相机场景的位置不对导致的,调整一下background的位置试试看,参考课程提供的源码对照一下,应该容易找到问题

0
0

千迦

2018-11-13

已收到,今晚回复

0
0

three.js-打造微信小游戏跳一跳 快速掌握3D游戏开发

three.js+WebGL+微信小游戏API, 带你进入3D的游戏世界

793 学习 · 147 问题

查看课程