three加载三维跑车轿车汽车四轮转动可配置颜色效果代码
代码语言:html
所属分类:三维
代码描述:three加载三维跑车轿车汽车四轮转动可配置颜色效果代码
代码标签: three 三维 跑车 轿车 汽车 四轮 转动 配置 颜色
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { color: #bbbbbb; background: #333333; } a { color: #08f; } .colorPicker { display: inline-block; margin: 0 10px } </style> </head> <body> <div id="info"> <br><br> <span class="colorPicker"><input id="body-color" type="color" value="#ff0000"></input><br/>Body</span> <span class="colorPicker"><input id="details-color" type="color" value="#ffffff"></input><br/>Details</span> <span class="colorPicker"><input id="glass-color" type="color" value="#ffffff"></input><br/>Glass</span> </div> <div id="container"></div> <!-- Import maps polyfill --> <!-- Remove this when import maps will be widely supported --> <script async type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.3.6.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwtool/build/three.module.js" } } </script> <script type="module"> import * as THREE from 'three'; import Stats from '//repo.bfw.wiki/bfwtool/examples/jsm/libs/stats.module.js'; import { OrbitControls } from '//repo.bfw.wiki/bfwtool/examples/jsm/controls/OrbitControls.js'; import { GLTFLoader } from '//repo.bfw.wiki/bfwtool/examples/jsm/loaders/GLTFLoader.js'; import { DRACOLoader } from '//repo.bfw.wiki/bfwtool/examples/jsm/loaders/DRACOLoader.js'; import { RGBELoader } from '//repo.bfw.wiki/bfwtool/examples/jsm/loaders/RGBELoader.js'; let camera, scene, renderer; let stats; let grid; let controls; const wheels = []; function init() { const container = document.getElementById( 'container' ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( render ); renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 0.85; container.appendChild( renderer.domElement ); window.addEventListener( 'resize', onWindowResize ); stats = new Stats(); container.appendChild( stats.dom ); // camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 ); camera.position.set( 4.25, 1.4, - 4.5 ); controls = new OrbitControls( camera, container ); controls.enableDamping = true; controls.maxDistance = 9; controls.target.set( 0, 0.5, 0 ); controls.update(); scene = new THREE.Scene(); scene.background = new THREE.Color( 0x333333 ); scene.environment = new RGBELoader().load( '//repo.bfw.wiki/bfwtool/examples/textures/equirectangular/venice_sunset_1k.hdr' ); scene.environment.mapping = THREE.EquirectangularReflectionMapping; scene.fog = new THREE.Fog( .........完整代码请登录后点击上方下载按钮下载查看
网友评论1