THREEJS案例-天空盒和草地

Posted 2021-04-21 开源编程案例

天空盒(Skybox) 是整个场景的一个包裹，显示了几何之外的世界。我们可以使用天空盒来模拟无限的天空，山脉等现实中的现象。

ThreeJS中实现天空盒有多种方式，可以用几何体模拟，也可以直接设置scene.background属性。最好还是后者，前者需要过多的代码逻辑控制。

用 scene.background设置天空盒需要六张图片，分别对应立方体的6个面。

可以看下这篇原理分析:

https://blog.csdn.net/yjr3426619/article/details/81224101

var urls = ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']; var loader = new THREE.CubeTextureLoader().setPath('images/skybox/'); loader.load(urls, function (texture) { scene.background = texture; });

设置好了天空盒，我们再来添加一片草地。

 var gt = new THREE.TextureLoader().load("images/grasslight-big.jpg");    // 平面几何体 var gg = new THREE.PlaneBufferGeometry(16000, 16000);    // 一种用于具有镜面高光的光泽表面的材质 var gm = new THREE.MeshPhongMaterial({ color: 0xffffff, map: gt }); // 表示基于以三角形为polygon mesh（多边形网格）的物体的类。同时也作为其他类的基类 var ground = new THREE.Mesh(gg, gm); ground.rotation.x = - Math.PI / 2; ground.material.map.repeat.set(64, 64); ground.material.map.wrapS = THREE.RepeatWrapping; ground.material.map.wrapT = THREE.RepeatWrapping;
 ground.receiveShadow = true;
 scene.add(ground);

完整的脚本，大家可以新建一个空的html，引入脚本。

参考连接：

https://threejs.org/examples/#webgl_animation_cloth

https://threejs.org/examples/?q=sky#webgl_shaders_sky

import * as THREE from '../build/three.module.js';
import { OrbitControls } from '../examples/jsm/controls/OrbitControls.js';
var scene, camera, renderer, clock = new THREE.Clock(), container;
function animate() { requestAnimationFrame(animate); render();}
function render() {
 renderer.render(scene, camera);}function init() { container = document.createElement('div'); document.body.appendChild(container);
 camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000); camera.position.set(0, 150, 1300);
 scene = new THREE.Scene(); scene.fog = new THREE.Fog(0xffffff, 1000, 4000);
 scene.add(camera);
 var urls = ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']; var loader = new THREE.CubeTextureLoader().setPath('images/skybox/'); loader.load(urls, function (texture) { scene.background = texture; });
 scene.add(new THREE.AmbientLight(0x222222));
 var light = new THREE.DirectionalLight(0xffffff, 2.25); light.position.set(200, 450, 500);
 scene.add(light);
 var gt = new THREE.TextureLoader().load("images/grasslight-big.jpg"); var gg = new THREE.PlaneBufferGeometry(16000, 16000); var gm = new THREE.MeshPhongMaterial({ color: 0xffffff, map: gt });
 var ground = new THREE.Mesh(gg, gm); ground.rotation.x = - Math.PI / 2; ground.material.map.repeat.set(64, 64); ground.material.map.wrapS = THREE.RepeatWrapping; ground.material.map.wrapT = THREE.RepeatWrapping;
 ground.receiveShadow = true;
 scene.add(ground);
 renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.gammaOutput = true; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight);
 container.appendChild(renderer.domElement); window.addEventListener('resize', onWindowResize, false);
 var cameraControls = new OrbitControls(camera, renderer.domElement); cameraControls.maxPolarAngle = Math.PI * 0.5; cameraControls.minDistance = 1000; cameraControls.maxDistance = 5000;}
function onWindowResize() { SCREEN_WIDTH = window.innerWidth; SCREEN_HEIGHT = window.innerHeight;
 renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT; camera.updateProjectionMatrix();
}
function update() { var delta = clock.getDelta();}
window.onload = function () { init(); animate();}