<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body { margin: ; }

            canvas { width: %; height: % }

    </style>

    <script src="./node_modules/three/three.js"></script>

    <script src="./node_modules/three/examples/js/controls/OrbitControls.js"></script>

    <script src="./node_modules/three/examples/js/loaders/OBJLoader.js"></script>

</head>

<body>

    <script>

        var scene = new THREE.Scene();//创建场景

        var geometry = new THREE.BoxGeometry(,,) //创建正方形 长宽高

        var material = new THREE.MeshBasicMaterial({color:0xff0000})// 创建材质

        var mesh = new THREE.Mesh(geometry,material)//创建网格

        scene.add(mesh);

        var light = new THREE.PointLight(0xffffff);//创建光源

        light.position.set(,,)

        scene.add(light)//添加光源

        scene.add(new THREE.AmbientLight(0x333333))

        var camera = new THREE.PerspectiveCamera(,/,,); //创建相机

        camera.position.set(,,);

        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer(); //渲染器

        renderer.setSize(,);

        document.body.appendChild(renderer.domElement);

        renderer.render(scene,camera);

        function render(){

            renderer.render(scene,camera);

        }

        var controls = new THREE.OrbitControls(camera); //相机控制器 鼠标

        controls.addEventListener('change',render)

// 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 );

    </script>

</body>

</html>

three.js 初学小示例的更多相关文章

  1. MVC客户端验证的小示例

    MVC客户端验证的小示例 配置客户端验证的可用性: <configuration> <appSettings>  <add key="ClientValidat ...

  2. node.js 初学（一）—— http fs 服务器/文件/post get

    node.js 初学 —— http fs 服务器/文件/post get 这个世界,从来不会给失败者颁奖! 了解 node.js (开源) node.js 是用来做后台开发的,但是现在大部分前端人员 ...

  3. JS处理事件小技巧

    今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...

  4. ReactNative新手学习之路06滚动更新ListView数据的小示例

    本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...

  5. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  6. 撸一个JS正则小工具

    写完正则在浏览器上检测自己写得对不对实在是不方便,于是就撸了一个JS正则小demo出来. demo demo展示 项目地址 代码部分 首先把布局样式先写好. <!DOCTYPE html> ...

  7. Node.js初学

    Node.js 初学~ 其技术上最大的卖点是非阻塞的I/O和基于事件的异步处理机制. 后端没有什么深入研究,一直对其不是很了解. 透过一个例子看 非阻塞 与 通常的 阻塞 var text = rea ...

  8. node.js 初学（二）—— 搭建注册/登录服务器

    node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...

  9. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

随机推荐

  1. 【Codeforces Round #299 (Div. 2) E】Tavas and Pashmaks

    [链接] 我是链接,点我呀:) [题意] 游泳+跑步比赛. 先游泳,然后跑步. 最先到终点的人是winner. 但是现在游泳的距离和跑步的距离长度都不确定. S和R. 给你n个人,告诉你每个人游泳的速 ...

  2. 【Codeforces Round #433 (Div. 2) A】Fraction

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 枚举分子从高到低就好. 这样得到的一定是最大的. (可以约分没错,但是约分过后和就不是n了,所以不会有错的) [错的次数] 0 [反思] 在这 ...

  3. stm32的dma缓冲区长度,,存放数据数组会不会冲掉

  4. memcached缓存分布式部署方案

    一.分布式方案介绍 比较流行的两种方案: 1.取余分布: 计算key的哈希值,与服务器数量取余,得到目标服务器.优点:实现简单,当某台服务器不可用时,故障转移方便:缺点:当增减服务器时, Key与服务 ...

  5. 10.5 android输入系统_Reader线程_使用EventHub读取事件和核心类及配置文件_实验_分析

    4. Reader线程_使用EventHub读取事件 使用inotify监测/dev/input下文件的创建和删除 使用epoll监测有无数据上报 细节: a.fd1 = inotify_init(& ...

  6. 使用ClassyShark压缩你的项目

    原文链接 : Shrinking Your Build With No Rules and do it with Class(yShark) 原文作者 : Roberto Orgiu 译文出自 : 开 ...

  7. position:absolute和margin：auto 连用实现元素水平垂直居中

    有时候,要实现一些元素水平垂直都居中,这部分元素呢 可能大小未知,例如一些图片或者是一些未知大小的块元素. 利用绝对定位可以将要居中的元素脱离文档流. position: absolute; left ...

  8. 影响stm32仿真的因素

    可能是因为电池电量不足??? 电量不足可能会妨碍SD卡的挂载

  9. go初探 - 生成随机整数

    func RandInt64(min, max int64) int64 { if min >= max || min == 0 || max == 0 { return max } rand. ...

  10. JavaScript中BOOLEAN类型之三种情景代码举例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...