代码效果
天空盒使用源码
<!DOCTYPE html> <html lang="en"> <head> <title>three.js - skybox</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link type="text/css" rel="stylesheet" href="main.css"> </head> <body> <div id="container"></div> <script type="module"> import * as THREE from '../build/three.module.js'; import { OrbitControls } from './jsm/controls/OrbitControls.js'; var scene, camera , renderer; init(); animate(); function init() { // scene scene = new THREE.Scene(); // camera camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 ); camera.position.set( - 15, 7, 15 ); camera.lookAt( scene.position ); // skybox var cubeTextureLoader = new THREE.CubeTextureLoader(); cubeTextureLoader.setPath( 'textures/cube/Park2/' ); //天空盒图片文件路径 var cubeTexture = new THREE.CubeTextureLoader.load( [ "posx.jpg", "negx.jpg", //图片 http://www.cglap.com/assets/lapbin/textures/cube/Park2/negx.jpg "posy.jpg", "negy.jpg", // http://www.cglap.com/assets/lapbin/textures/cube/Park2/negy.jpg "posz.jpg", "negz.jpg" //http://www.cglap.com/assets/lapbin/textures/cube/Park2/negz.jpg ] ); scene.background = cubeTexture; // light var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 ); scene.add( ambientLight ); var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 ); directionalLight.position.set( - 1, 1, 1 ); scene.add( directionalLight ); // renderer renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setPixelRatio( window.devicePixelRatio ); document.body.appendChild( renderer.domElement ); // 鼠标控制旋转 var controls = new OrbitControls( camera, renderer.domElement ); controls.minDistance = 5; controls.maxDistance = 50; // window.addEventListener( 'resize', onResize, false ); } function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function animate() { requestAnimationFrame( animate ); render(); } function render() { renderer.render( scene, camera ); } </script> </body> </html>