问题描述
function createScene() {
cubeSize = 200;
fieldDepth = 50;
fieldWidth = 200;
fieldHeight = 200;
initObstacles = _ => _;
// set the scene size
var WIDTH = 1000;
var HEIGHT = 500;
// set camera attributes
var VIEW_ANGLE = 40,ASPECT = WIDTH / HEIGHT,NEAR = 0.1,FAR = 1000;
// --------------create a WebGL renderer,camera and a scene------------------
renderer = new THREE.Webglrenderer({
antialias: true,alpha: true
});
// start the renderer
renderer.setSize(WIDTH,HEIGHT);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(500,1.25,0.1,1000);
// ----------Add the camera to the scene----------
scene.add(camera);
// Set a default position for the camera
camera.position.z = 225;
// Attach the render-supplied DOM element to the gameCanvas
var c = document.getElementById("gameCanvas");
c.appendChild(renderer.domElement);
// Make a cube with LAmbert material
// ---------------------------------
// Lower fragments can increase performance
var cubeWidth = cubeSize,cubeHeight = cubeSize,cubedepth = 10,cubeQuality = 1;
// create the cube's material
var cubeMaterial = new THREE.MeshLAmbertMaterial({
color: 0xb22222
});
//---------create a cube with sphere geometry and the meterial--------------
cube = new THREE.Mesh(
new THREE.BoxGeometry(
cubeWidth,cubeHeight,cubedepth,cubeQuality,cubeQuality
),cubeMaterial);
// lift the cube to half of the playing space height
cube.position.z = fieldDepth / 2;
// set the cube x position in the left of the play field
cube.position.x = -fieldWidth / 3;
// add the cube to the scene
scene.add(cube);
// Make sky background plane
// sky plane vars
var planeWidth = fieldWidth,planeHeight = fieldHeight,planeQuality = 5;
// create plane's material
var planeMaterial = new THREE.MeshLAmbertMaterial({
color: 0xff0000
});
//----------create the playing surface plane--------
var plane = new THREE.Mesh(
// changed PlaneGeometry to PlaneBufferGeometry for lower memory footprint
new THREE.PlaneBufferGeometry(
planeWidth,planeHeight,planeQuality,),planeMaterial);
scene.add(plane);
// Obstacles
initObstacles();
//---------------Lights------------
var directionalLight = new THREE.DirectionalLight(0xffffff,1);
directionalLight.position.set(0,100);
directionalLight.rotation.x = 90 * Math.PI / 180;
scene.add(directionalLight);
renderer.render(scene,camera);
}
createScene();
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.min.js"></script>
<div id="gameCanvas"></div>
解决方法
为画布添加背景
canvas {
background-image: url("https://greggman.com/images/godzilla.gif");
background-size: cover;
}
function createScene() {
cubeSize = 200;
fieldDepth = 50;
fieldWidth = 200;
fieldHeight = 200;
initObstacles = _ => _;
// set the scene size
var WIDTH = 1000;
var HEIGHT = 500;
// set camera attributes
var VIEW_ANGLE = 40,ASPECT = WIDTH / HEIGHT,NEAR = 0.1,FAR = 1000;
// --------------create a WebGL renderer,camera and a scene------------------
renderer = new THREE.WebGLRenderer({
antialias: true,alpha: true
});
// start the renderer
renderer.setSize(WIDTH,HEIGHT);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(500,1.25,0.1,1000);
// ----------Add the camera to the scene----------
scene.add(camera);
// Set a default position for the camera
camera.position.z = 225;
// Attach the render-supplied DOM element to the gameCanvas
var c = document.getElementById("gameCanvas");
c.appendChild(renderer.domElement);
// Make a cube with Lambert material
// ---------------------------------
// Lower fragments can increase performance
var cubeWidth = cubeSize,cubeHeight = cubeSize,cubeDepth = 10,cubeQuality = 1;
// create the cube's material
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xb22222
});
//---------create a cube with sphere geometry and the meterial--------------
cube = new THREE.Mesh(
new THREE.BoxGeometry(
cubeWidth,cubeHeight,cubeDepth,cubeQuality,cubeQuality
),cubeMaterial);
// lift the cube to half of the playing space height
cube.position.z = fieldDepth / 2;
// set the cube x position in the left of the play field
cube.position.x = -fieldWidth / 3;
// add the cube to the scene
scene.add(cube);
// Make sky background plane
// sky plane vars
var planeWidth = fieldWidth,planeHeight = fieldHeight,planeQuality = 5;
// create plane's material
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000
});
//----------create the playing surface plane--------
var plane = new THREE.Mesh(
// changed PlaneGeometry to PlaneBufferGeometry for lower memory footprint
new THREE.PlaneBufferGeometry(
planeWidth,planeHeight,planeQuality,),planeMaterial);
scene.add(plane);
// Obstacles
initObstacles();
//---------------Lights------------
var directionalLight = new THREE.DirectionalLight(0xffffff,1);
directionalLight.position.set(0,100);
directionalLight.rotation.x = 90 * Math.PI / 180;
scene.add(directionalLight);
renderer.render(scene,camera);
}
createScene();
canvas {
background-image: url("https://greggman.com/images/godzilla.gif");
background-size: cover;
}
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.min.js"></script>
<div id="gameCanvas"></div>