Threejs 基于webGL的3D开发神器

admin · 发表于 2019-9-1 18:45:09

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！

您需要登录才可以下载或查看，没有账号？注册

×

废话不多说，官网自己百度下， threejs.org ，入门很简单。

创建的javascript脚本如下

[mw_shl_code=javascript,true]
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Refresh Issue
window.addEventListener('resize', function () {
var width = this.window.innerWidth;
var height = this.window.innerHeight;
render.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
})

//orbit contorls
controls = new THREE.OrbiTControls(camera,renderer.domElement);

//create the shape
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
//create  a meterial
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
//var material = new THREE.MeshFaceMaterial(myMaterial);

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

//rotate
var update = function () {
cube.rotation.x += .01;
cube.rotation.y += .02;
cube.rotation.z += .02;
}

var render = function () {
renderer.render(scene, camera);
}

var Gameloop = function () {
requestAnimationFrame(Gameloop);
update();
render();
}

Gameloop();
[/mw_shl_code]

引入争取的html，

[mw_shl_code=html,true]<!DOCTYPE html>
<html>

<head>
<title>hello ThreeJS</title>
<style>
      body {
         margin: 0;
      }

      canvas {
         width: 100%;
         height: 100%;
      }

      h1 {
         color: aqua;
      }
</style>
</head>

<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="myjs.js"></script>


</body>

</html>[/mw_shl_code]

效果点击这里：

http://plmhome.com/doteam/lesson1.html

[前端框架] Threejs 基于webGL的3D开发神器

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！