顶点和颜色att

src/index.js

@@ -1,36 +1,56 @@
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
-import "./css/style.css";
-
 //创建场景
 var scene = new THREE.Scene();
 
 //创建模型和material
-var geometry = new THREE.SphereGeometry(30, 60, 60);
-var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });
-var mesh = new THREE.Mesh(geometry, material);
+var geometry = new THREE.BufferGeometry();
+var vertices = new Float32Array([
+    0, 0, 100
+]);
+var posAttribute = new THREE.BufferAttribute(vertices, 3);
+    //类型数组创建顶点颜色color数据
+    var colors = new Float32Array([
+        1, 1, 0
+      ]);
+var colorAttribute = new THREE.BufferAttribute(colors, 3);
+geometry.attributes.position = posAttribute;
+geometry.attributes.color = colorAttribute;
+
+
+var material = new THREE.PointsMaterial( { 
+    vertexColors: THREE.VertexColors,
+    size: 10.0 //点对象像素尺寸
+} );
+
+
+var mesh = new THREE.Points( geometry, material );
+scene.add(mesh);
+
 
 //光照
-var ambient = new THREE.AmbientLight(0x080808, 1.6); //环境光
+var ambient = new THREE.AmbientLight(0x444444); //环境光
 var point = new THREE.PointLight(0xffffff);
-//point.position.set(0, 40, 0);
-point.position.set(0, 0, 100); //点光源位置
+point.position.set(400, 200, 300); //点光源位置
 
 //布置场景
-scene.add(mesh);
 scene.add(ambient);
 scene.add(point);
 
+// 辅助坐标系
+var axisHelper = new THREE.AxesHelper(250);
+scene.add(axisHelper);
+
 //创建摄像机
-var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
-camera.position.set(0, 0, 100);
-camera.lookAt(0, 0, 0);
+var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.set(200, 300, 200);
+camera.lookAt(scene.position);
 
 //创建渲染器
 var renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
-renderer.setClearColor(0x000000, 1); //设置背景颜色
+renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
 document.body.appendChild(renderer.domElement);
 
 const controls = new OrbitControls(camera, renderer.domElement);

src/model.js

@@ -1,9 +0,0 @@
-let fun1 = ()=>{
-	console.log("fun1 is called");
-}
-
-let fun2 = ()=>{
-	console.log("fun2 is called");
-}
-
-export {fun1,fun2}

webpack.config.js

@@ -3,6 +3,7 @@ const path = require('path');
 module.exports = {
     mode: "development",
     entry: './src/index.js',
+    devtool: 'inline-source-map',
     output: {
         filename: 'main.js',
         path: path.resolve(__dirname, 'dist')