diff --git a/src/index.js b/src/index.js index b7a3b1f..1c4fc4b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,22 +1,41 @@ -import * as THREE from 'three'; +import "@babel/polyfill"; +import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial.js'; import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js'; +import { Scene } from 'three/src/scenes/Scene.js'; +import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; + //创建场景 -var scene = new THREE.Scene(); +var scene = new Scene(); //创建模型和material -var geometry = new THREE.SphereBufferGeometry(10,10,10); -var material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); +var geometry = new THREE.SphereBufferGeometry(20, 10, 50); +var material = new MeshBasicMaterial({ + color: 0xffff00 +}); + -var mesh = new THREE.Mesh( geometry, material ); +var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); +var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); +camera.position.set(0, 0, 100); +camera.lookAt(scene.position); -//光照 +var renderer = new WebGLRenderer(); + +renderer.setSize(window.innerWidth, window.innerHeight); +renderer.setClearColor("rgb(25, 25, 25)", 1); //设置背景颜色 +document.body.appendChild(renderer.domElement); + +renderer.render(scene, camera); + + +/*//光照 var ambient = new THREE.AmbientLight(0x004444); //环境光 var point = new THREE.PointLight(0xffffff); -point.position.set(400, 200, 300); //点光源位置 +point.position.set(400, 200, 301); //点光源位置 //布置场景 // scene.add(ambient); @@ -24,7 +43,7 @@ point.position.set(400, 200, 300); //点光源位置 // 辅助坐标系 var axisHelper = new THREE.AxesHelper(250); -//scene.add(axisHelper); +scene.add(axisHelper); //创建摄像机 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); @@ -33,6 +52,7 @@ camera.lookAt(scene.position); //创建渲染器 var renderer = new WebGLRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor("rgb(255, 255, 255)", 1); //设置背景颜色 document.body.appendChild(renderer.domElement); @@ -45,4 +65,4 @@ function render() { render(); //监听鼠标事件,触发渲染函数,更新canvas画布渲染效果 -controls.addEventListener('change', render); \ No newline at end of file +controls.addEventListener('change', render);*/ \ No newline at end of file