three.js初学习，感觉也不是很难啊!小白能看懂

<!DOCTYPE html>

<html>

<head>

<title>Example 01.02 - First Scene</title>

<style>

body {

/* set margin to 0 and overflow to hidden, to go fullscreen */

margin: 0;

overflow: hidden;

}

div{

width: 200px;

height: 300px;

border: #000000 solid 1px;

}

</style>

</head>

<body>

</div>

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

function init() {

// 定义一个场景对象.

var scene = new THREE.Scene();

// 定义摄像机对象

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

// 定义一个渲染器对象

var renderer = new THREE.WebGLRenderer();

// 设置场景背景为接近黑色的颜色报错，不知道什么原因？？？？？？？

// renderer.setClearColorHex(new THREE.Color(0x000000));

//设置场景背景为接近黑色的颜色这里却可以正常运行

renderer.setClearColor(new THREE.Color(0xaaaaaa));

// 设置场景的大小为整个页面窗口的大小

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

// 设置坐标轴对象，并设置轴的长短值为20

var axes = new THREE.AxisHelper(30);

// 将轴添加到场景中

scene.add(axes);

// 创建平面对象，并设置大小为60长 30宽

var planeGeometry = new THREE.PlaneGeometry(60, 30);

// 创建平面材质对象，并设置平面颜色为随意的16进制颜色代码

var planeMaterial = new THREE.MeshBasicMaterial({color: 0x654321});

// 将大小和外观组合赋值给mesh平面对象

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

// 平面沿x轴旋转90度

// plane.rotation.x = -0.5 * Math.PI;

// 平面沿x轴旋转30度

plane.rotation.x = 30;

// 用position 定义在场景中的三维位置

plane.position.x = 15;

plane.position.y = 0;

plane.position.z = 0;

// 场景中添加平面

scene.add(plane);

// 创建正方体对象，并设置边长为4

var cubeGeometry = new THREE.BoxGeometry(8, 4, 4);

var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});

// 将大小和外观组合赋值给mesh对象

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

// 用position 定义在场景中的三维位置

cube.position.x = -4;

cube.position.y = 3;

cube.position.z = 0;

// 将立方体的对象添加到场景中

scene.add(cube);

// 创建一个球体对象，并设置大小半径4 表面网格越大格子越小

var sphereGeometry = new THREE.SphereGeometry(4, 50, 50);

var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});

// 将大小和外观组合赋值给mesh对象

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

// 用position 定义球体在场景中的三维位置

sphere.position.x = 10;

sphere.position.y = 4;

sphere.position.z = 2;

// 将球体添加到场景中去

scene.add(sphere);

// 定义摄像机的position在场景中的位置

camera.position.x = -15;

camera.position.y = 80;

camera.position.z = 30;

//相机焦点方向，默认为Z轴负半轴方向, 大白话就是相机看向哪一个点

camera.lookAt(scene.position);

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

document.getElementById("WebGL-output").appendChild(renderer.domElement);

// 调用渲染器的渲染函数，将场景和摄像机全然进去

renderer.render(scene, camera);

}

window.onload = init;

</script>

</body>

</html>

网站首页 > 技术文章正文

猜你喜欢

网站首页 > 技术文章 正文

three.js初学习，感觉也不是很难啊!小白能看懂

猜你喜欢

网站首页 > 技术文章正文