新建场景
以 CDN 方式创建一个基础场景。
代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { margin: 0; } </style> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.159.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/" } } </script> </head> <body> <script type="module"> import * as THREE from 'three' import { OrbitControls } from 'three/addons/controls/OrbitControls.js' import Stats from 'three/addons/libs/stats.module.js' import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js' import { RenderPass } from 'three/addons/postprocessing/RenderPass.js' import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js' import { OutputPass } from 'three/addons/postprocessing/OutputPass.js' const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000, ) const renderer = new THREE.WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) document.body.appendChild(renderer.domElement) const geometry = new THREE.BoxGeometry(1, 1, 1) const material = new THREE.MeshBasicMaterial({ color: '#409eff' }) const cube = new THREE.Mesh(geometry, material) scene.add(cube) camera.position.z = 5 const controls = new OrbitControls(camera, renderer.domElement) const composer = new EffectComposer(renderer) const renderPass = new RenderPass(scene, camera) composer.addPass(renderPass) const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio(), ) composer.addPass(smaaPass) const outputPass = new OutputPass() composer.addPass(outputPass) const stats = new Stats() document.body.appendChild(stats.dom) function animate() { requestAnimationFrame(animate) stats.begin() cube.rotation.x += 0.01 cube.rotation.y += 0.01 controls.update() composer.render() renderer.render(scene, camera) stats.end() } window.addEventListener('resize', onWindowResize) function onWindowResize() { const width = window.innerWidth const height = window.innerHeight camera.aspect = width / height camera.updateProjectionMatrix() renderer.setSize(width, height) composer.setSize(width, height) } animate() </script> </body> </html>
