|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
g+ H) {* n# N, u& q% \2 k/ `# t. a$ \
废话不多说,官网自己百度下, threejs.org ,入门很简单。
. O6 o/ @ M) }' l, z B
S: v9 Y, [5 S1 N创建的javascript脚本如下$ @! a6 F: v1 K% {4 m' B( ]
% T: P) g; D( N7 T* y* @1 O
9 a! `7 [3 a+ ~" z% P
[mw_shl_code=javascript,true]; r4 `( Q. I5 X3 L3 E" c! h
var scene = new THREE.Scene();
+ j$ c) ?# f& |5 Q6 F3 [7 G# hvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
$ b8 _6 |. H5 w( w% m' ?6 ?var renderer = new THREE.WebGLRenderer();
9 Z& k& f2 N# erenderer.setSize(window.innerWidth, window.innerHeight);4 O/ G L5 l9 b* L- O
document.body.appendChild(renderer.domElement);
* Y9 C, ?) r+ g9 m
5 |& |3 L0 K! D// Refresh Issue
, }- d" x! H: vwindow.addEventListener('resize', function () {# r0 A8 v. Y$ [4 i% j/ l& H8 G8 O" c3 O% `
var width = this.window.innerWidth;+ Z7 V4 |; D' T2 Z* c% V) }
var height = this.window.innerHeight;, l x, i5 _8 o( D
render.setSize(width, height);0 ]! |( L3 s0 D$ b0 Q
camera.aspect = width / height;
$ W+ U; A- w7 C* G! D' _ camera.updateProjectionMatrix();( A: h: w) g9 U2 k/ a& \, C
})
1 ?7 D6 t8 E: j
+ N1 m3 Y! y2 \5 q. o) @+ @//orbit contorls! a: Q( e2 H9 R
controls = new THREE.OrbiTControls(camera,renderer.domElement);+ s1 m4 s" _. v- H1 o% X
9 e4 s L3 l! ?6 _
//create the shape! ]4 L! i2 [- b4 {+ {
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
* c8 c, |" I' g" m+ k//create a meterial/ l8 Z) S# W8 ^- J( _: w6 c5 p ^
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });4 }0 O" G, q: }2 \2 f
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];& r4 z. H, O, ]' I3 ] _% W
//var material = new THREE.MeshFaceMaterial(myMaterial);7 R& r* K3 X3 `8 `+ r
" K$ `/ t" q* ^: {& t! }# _9 v
var cube = new THREE.Mesh(geometry, material);) i+ U$ C& S, a
scene.add(cube);
6 g- x, [; a. @$ G& L4 tcamera.position.z = 5;0 v! i7 Q# [2 n& v7 O$ q6 b: n* x
9 n9 X0 Q$ h- [: V" a% A7 O2 i
; C& H" H6 h) l
) p* K! o; Z r @* ]2 c& z$ t
- ^6 m6 r2 B1 T; X$ a; k5 \
' l1 B6 V7 E1 o" Y9 W. b//rotate 0 l$ G h1 d" P% A
var update = function () {
* R: Q- z" I4 _2 |2 r cube.rotation.x += .01;
( ~* w! @: k3 U0 L' ?0 c cube.rotation.y += .02;3 K/ J$ ?! u9 s3 }5 M
cube.rotation.z += .02;
0 Z# ]! {0 V6 d4 j! n}1 H, Q$ A7 } Q5 k: |9 @# g7 N
4 G+ P$ s+ f. U# b$ n
var render = function () {
5 e) x8 b' s. f! s renderer.render(scene, camera);, @' S+ R8 E1 s- b5 _3 c
}- J! M* L$ |* ?- l6 o. C* P
; k8 j+ ]+ y. p* O0 Z$ v- s+ c% G: Q3 `- \
+ J( R* ^7 ?$ S, o# x
var Gameloop = function () {
$ y5 y( q' I/ G; I% O N1 H requestAnimationFrame(Gameloop);
: a; V% i# w5 z8 k, j0 p update();/ m( {$ o: d. N( K5 [) N/ t
render(); t( | X3 ]' W/ {) ]
}/ Z0 ?/ |: ]4 G0 Q6 Y0 `! j. L
+ G8 A; S- g% O# X
Gameloop();
, g8 P1 o1 h; N% Z+ z8 @[/mw_shl_code]( U& B; q/ z0 U! n
9 P$ g; R! V7 U1 t+ W# b+ x, U! `5 P3 V) F6 n
引入争取的html,$ r; F, J0 l4 Q# N" K) r) l% o. b
' K; l' H9 h1 A[mw_shl_code=html,true]<!DOCTYPE html>3 u/ S Y/ Z8 d0 [ j
<html>
' d! o% r0 J B% n* z5 M/ s4 H- W \- y3 P2 X
<head>$ `1 P1 m0 T- Z q
<title>hello ThreeJS</title># A! d- [ I/ q( d+ \
<style>2 N6 z; [6 \8 [1 I
body {, u$ F v1 q0 ^+ V+ L
margin: 0;9 P, z0 u! A$ {. v4 w9 u
}
+ W6 G9 a6 _+ c; M
) b( T# u3 S& k3 K7 t4 X/ Q canvas {
. L; L5 U0 E* H8 {7 ~) Z width: 100%;, _0 I/ w- g8 g+ l @& i" v$ `
height: 100%;
* Q. _4 a& q H; i* z }
$ L! P) b& A( k: x! ~! H! o' q# `- I" _4 ^; f
h1 {
- ~7 S3 b; r7 Y+ f& V* | color: aqua;
( d+ m( r+ D$ {, {3 b }5 G$ ?; t" Z. F+ M
</style>6 a z* e$ B6 N3 Y
</head>8 P6 y0 D2 p4 N! ^( `
, B9 n+ T: g, h<body>7 E! f% c; \8 h8 Q. d0 y
<script src="js/three.js"></script>5 r, ~; e- {8 R0 [
<script src="js/OrbitControls.js"></script>
7 {& y n, n5 p l. } <script src="myjs.js"></script>2 s& U( p4 N7 Y8 Y5 l8 H
$ c) \1 Q/ B- E3 _; f5 s2 s% _5 f
' ]' h3 ]4 h5 U1 P4 a. m2 X
' l- @/ K$ q( i2 t1 D
$ p0 i4 i; d" j0 S# B, J0 d6 O</body>
( {) R- v# x& X. h8 ?* }
, Y d3 {4 v3 ]</html>[/mw_shl_code]
& h- V+ A2 j; N/ W% Q5 q' }& E6 g' c. h% q. s @* I9 a. N
效果点击这里: R( e# Q4 l1 B3 \3 h/ |/ W. Q. Z
" U2 _. M9 ~# e# p
http://plmhome.com/doteam/lesson1.html
- b1 s2 W& t% {$ K: _1 X, k, a( b* B4 J! l% w
& O3 \& V; U) x
|
|