可视化

admin管理员组

文章数量:1516870

可视化

给地球添加一个天空盒

样式如下


背景添加六个图片 形成天空盒子
如立方体 6 个面 行程之后包裹；
如果需要资源：

new THREE.CubeTextureLoader().setPath("../image/way/").load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])  

var camera, scene, renderer;var clock = new THREE.Clock();var earth;function init() {camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);camera.position.set(0, 100, 300);camera.lookAt(new THREE.Vector3(0, 0, 0))scene = new THREE.Scene(); //给场景加入一个天空盒 顺序不能乱//资源可自行搜索引擎搜索天空盒资源下载scene.background = new THREE.CubeTextureLoader().setPath("../image/way/").load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.querySelector("#dom").appendChild(renderer.domElement);//把canvas加载到dom元素中df_canvas = renderer.domElementif (THREE.OrbitControls) {new THREE.OrbitControls(camera, renderer.domElement);}//生成地球createEarth()animate()}//创建地球function createEarth() {//光源 var light = new THREE.AmbientLight(0xffffff); // 环境光scene.add(light);//球体var _config = {radius: 100,//半径map: new THREE.TextureLoader().load('../image/earth.jpg'),//加载需要的地球贴图 }//圆形几何var geometry = new THREE.SphereBufferGeometry(_config.radius, 64, 64);//材质   var material = new THREE.MeshPhongMaterial({color: 0xffffff,//颜色map: _config.map});earth = new THREE.Mesh(geometry, material);scene.add(earth);}function animate() {requestAnimationFrame(animate);var delta = clock.getDelta();renderer.render(scene, camera);earth.rotation.y += delta / 5;}init();

快速搭建工具-持续开发中

本文标签： 可视化