mesh threejs 属性_threeJS创建mesh，创建平面，设置mesh的平移，旋转、缩放、自传、透明度、拉伸...

这个小案例是当初我在学习的时候，小的一个小案例，代码还需要进一步优化；还请谅解~~；主要用到了threeJS创建mesh，创建平面，设置mesh的平移，旋转、缩放、自传、透明度、拉伸等这些小功能；

(点击每个mesh，mesh的颜色会变为红色)

点击

1  需要加载这些相关的js文件

2   下面是实现的一些小功能

3   下面是相关代码，代码还没有优化，请谅解~~(具体的每一个小功能后面我都会进行一一讲解)

body {

margin: 0;

overflow: hidden;

/* 隐藏body窗口区域滚动条 */

}

// once everything is loaded, we run our Three.js stuff.

$(function () {

var stats = initStats();

// create a scene, that will hold all our elements such as objects, cameras and lights.

var scene = new THREE.Scene();

// create a camera, which defines where we're looking at.

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

// create a render and set the size

var renderer;

var webGLRenderer = new THREE.WebGLRenderer();

webGLRenderer.setClearColorHex(0xEEEEEE, 1.0);

webGLRenderer.setSize(window.innerWidth, window.innerHeight);

webGLRenderer.shadowMapEnabled = true;

var canvasRenderer = new THREE.CanvasRenderer();

canvasRenderer.setSize(window.innerWidth, window.innerHeight);

renderer = webGLRenderer;

var groundGeom = new THREE.PlaneGeometry(100, 100, 4, 4);

var groundMesh = new THREE.Mesh(groundGeom, new THREE.MeshBasicMaterial({ color: 0x777777 }));

groundMesh.rotation.x = -Math.PI / 2;

groundMesh.position.y = -20;

scene.add(groundMesh);

var sphereGeometry = new THREE.SphereGeometry(14, 20, 20);

var cubeGeometry = new THREE.CubeGeometry(15, 15, 15);

var planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4);

var meshMaterial = new THREE.MeshNormalMaterial({ color: 0x7777ff });

var sphere = new THREE.Mesh(sphereGeometry, meshMaterial);

var cube = new THREE.Mesh(cubeGeometry, meshMaterial);

var plane = new THREE.Mesh(planeGeometry, meshMaterial);

// position the sphere

sphere.position.x = 0;

sphere.position.y = 3;

sphere.position.z = 2;

for (var f = 0, fl = sphere.geometry.faces.length; f < fl; f++) {

var face = sphere.geometry.faces[f];

var arrow = new THREE.ArrowHelper(

face.normal,

face.centroid,

2,

0x3333FF);

sphere.add(arrow);

}

cube.position = sphere.position;

plane.position = sphere.position;

// add the sphere to the scene

scene.add(cube);

// position and point the camera to the center of the scene

camera.position.x = -20;

camera.position.y = 30;

camera.position.z = 40;

camera.lookAt(new THREE.Vector3(10, 0, 0));

// add subtle ambient lighting

var ambientLight = new THREE.AmbientLight(0x0c0c0c);

scene.add(ambientLight);

// add spotlight for the shadows

var spotLight = new THREE.SpotLight(0xffffff);

spotLight.position.set(-40, 60, -10);

spotLight.castShadow = true;

scene.add(spotLight);

// add the output of the renderer to the html element

$("#WebGL-output").append(renderer.domElement);

// call the render function

var step = 0;

var oldContext = null;

var controls = new function () {

this.rotationSpeed = 0.02;

this.bouncingSpeed = 0.03;

this.opacity = meshMaterial.opacity;

this.transparent = meshMaterial.transparent;

this.visible = meshMaterial.visible;

this.side = "front";

this.wireframe = meshMaterial.wireframe;

this.wireframeLinewidth = meshMaterial.wireframeLinewidth;

this.selectedMesh = "cube";

this.shadow = "flat";

}

var gui = new dat.GUI();

var spGui = gui.addFolder("Mesh");

spGui.add(controls, 'opacity', 0, 1).onChange(function (e) {

meshMaterial.opac