PLM之家PLMHome

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

2019-9-1 18:45:09 126 0

[复制链接]
admin 发表于 2019-9-1 18:45:09 |阅读模式

admin 楼主

2019-9-1 18:45:09

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

您需要 登录 才可以下载或查看,没有帐号?注册

x

& @, D2 [- s( q- q8 w2 Y
8 y1 `( N3 I6 i8 E/ c废话不多说,官网自己百度下, threejs.org ,入门很简单。
1 b" {, O. v' ]* f9 i: O" `& m- H2 t& S& W6 b) M
创建的javascript脚本如下
$ E( G9 c" `. E: P5 ^; U. o( f2 W$ K. @$ a- J4 F$ i' }9 |
GIF.gif 9 p; @4 w* u: X5 ~
[JavaScript] 纯文本查看 复制代码
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();
1 p* J4 Q" I9 ~
8 M: m" v7 s' A3 s6 p) |, r
3 f8 ?/ i  ?6 K. r' W1 H+ }& [4 {
引入争取的html,' `% n* I. h' n! r1 j: k- i
! W  E) C1 t' \, a) K9 `$ s
[HTML] 纯文本查看 复制代码
<!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>
' _' k2 h0 t0 ?

( ^% D* C9 d! z0 X效果点击这里:
1 S4 e' q6 n+ w1 j( F3 U: J) Q$ u7 t- F
http://plmhome.com/doteam/lesson1.html, `8 H& k9 L9 J# ~
& e$ W$ _" ~% v/ f* r0 @) W
: g9 }) H9 l0 o: R' U
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

用户组 : 管理员
邮   箱 :xduniverse@qq.com
手   机 :VIP用户可查看[申请]
Q   Q : 点击这里给我发消息
性别 : 就不告诉你
主页 :http://www.plmhome.com
个人介绍 :原西门子NX高级教务员,10多年NX培训,开发咨询,Teamcenter培训实施等

主题2237

帖子3470

积分65899

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 6 实现打开PLM之家

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 5 创建Tecnomatix

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 4 设置图标效果如

  • Tecnomatix 二次开发

    Tecnomatix 二次开发入门教程 3 第一个hello plm

  • 官方文档,NX12 使用

    官方文档,NX12 使用 Python进行二次开发相关配

  • 关闭

    站长推荐上一条 /1 下一条

  • 发布新帖
  • 在线客服1
  • 在线客服2
  • 微信
  • 客户端
  • 返回顶部