<!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. Qt5 UI信号、槽自动连接的控件重名大坑（UI生成的槽函数存在一个隐患，即控件重名。对很复杂的控件，不要在 designer 里做提升，而是等到程序启动后，再动态创建，可以避免很多问题）

    对Qt5稍有熟悉的童鞋都知道信号.槽的自动连接机制.该机制使得qt designer 设计的UI中包含的控件,可以不通过显式connect,直接和cpp中的相应槽相关联.该机制的详细文章见 http: ...

  2. 硬件——STM32 , 录音

    战舰V3的录音程序解析 上一章,我们实现了一个简单的音乐播放器,本章我们将在上一章的基础上,实现一个简单的录音机,实现WAV录音.本章分为如下几个部: 50.1 WAV简介 50.2 硬件设计 50. ...

  3. autohotkey 自动登录输入用户名密码 getElementsByTagName/getElementsByClassName/getElementById

    针对button未设置id的.可以通过getElementsByTagName获取button的对象数组,再明确其在对象数组中的位置,如第4个button,通过[3]获取.再调用此对象的click() ...

  4. Surging -Demo部署

    原文:Surging -Demo部署 1.安装rabbitmq docker run -d --name rabbitmq --restart=unless-stopped --publish 567 ...

  5. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  6. (转)Vim练级攻略

    (转)Vim练级攻略 原文链接:http://coolshell.cn/articles/5426.html vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆 ...

  7. ios日期比较

    +(int)compareDate:(NSDate *)date1 date:(NSDate *)date2 { NSDateFormatter *dateFormatter = [[NSDateFo ...

  8. 一文看懂AI芯片竞争五大维度

    下一波大趋势和大红利从互联网+让位于人工智能+,已成业界共识.在AI的数据.算法和芯片之三剑客中,考虑到AI算法开源的发展趋势,数据与芯片将占据越来越重要的地位,而作为AI发展支柱的芯片更是AI业的竞 ...

  9. HDU 1800 Flying to the Mars Trie或者hash

    http://acm.hdu.edu.cn/showproblem.php?pid=1800 题目大意: 又是废话连篇 给你一些由数字组成的字符串,判断去掉前导0后那个字符串出现频率最高. 一开始敲h ...

  10. SpringMvc（4-1）Spring MVC 中的 forward 和 redirect（转）

    Spring MVC 中,我们在返回逻辑视图时,框架会通过 viewResolver 来解析得到具体的 View,然后向浏览器渲染.通过配置,我们配置某个 ViewResolver 如下: <b ...