threejs-demo
/
bg.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs</title>
</head>
<body style="margin: 0">
    <div id="container"></div>
</body>
<script type="importmap">
    {
        "imports": {
            "three": "./node_modules/three/build/three.module.js",
            "three/": "./node_modules/three/"
        }
    }
</script>
<script type="module">
    import * as THREE from 'three'
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
    // 初始化webgl
    const renderer = new THREE.WebGLRenderer( { antialias: true } )
    renderer.setPixelRatio( window.devicePixelRatio )
    renderer.setSize( window.innerWidth, window.innerHeight )
    document.getElementById('container').appendChild( renderer.domElement )
    // 初始化相机
    const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 )
    camera.position.setZ(10)
    // 初始化场景
    const scene = new THREE.Scene()
    // 相机插件
    const controls = new OrbitControls(camera, renderer.domElement)
    // 初始化天空盒
    const path = './images/skybox1/'
    const urls = [
        path + '6.png',
        path + '3.png',
        path + '2.png',
        path + '1.png',
        path + '5.png',
        path + '4.png'
    ]
    const textCube = new THREE.CubeTextureLoader().load(urls)
    // textCube.encoding = THREE.sRGBEncoding
    scene.background = textCube
    // 灯光
    const light = new THREE.AmbientLight( 0xff8800, 0.3 )
    scene.add( light )

    // 窗口自适应
    window.addEventListener( 'resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight
        camera.updateProjectionMatrix()
        renderer.setSize( window.innerWidth, window.innerHeight )
    })
    // 渲染
    function animate() {
        controls.update()
        renderer.render( scene, camera )
        requestAnimationFrame(animate)
    }
    animate()
</script>
</html>