免费图片素材网站汇总
0 373

Pixabay

Pixabay 是一个免费高清图库网站,而且它的所有图片都是免费使用的,甚至用于商业,你可以通过类别来查找图片,也可以使用搜索来查找图片,它同时还支持筛选结果,你可以选择图片的方向、类别尺寸、大小等等。同时它也支持多个国家的语言,当然也支持中文。

Pexels

Pexels 是一个和pixabay 类似的免费高清图片网站,你可以个人和商业引用,甚至可以重新分发,它遵循CC0 协议,打开它的主页,中间一个输入框,下面会精选出搜索最热门的关键词、图片,还有免费提供的博主专栏,你还可以将自己的图片上传至Pexels,分享给更多的人使用,你可以根据颜色搜索,它同时也提供了电脑客户端。

pinterest

Pinterest 是一个流行的图片社交平台,用户可以将任何地方的图片,文章分享到自己的主页,当然人们使用它来收藏收藏图片,而且它还有各个平台的插件,App,配合使用,采集图片非常方便。国内有类似的功能,像花瓣,堆糖都有类似的功能。

UnSplash

UnSplash 同样是一个免费高清图库网站,但是它的所有的图片都是来自用户自己上传,所以也更加有人情味,看到一张图片,你还能看到作者的信息,你还可以点赞和收藏,它的Timeline 更像是Insta 的,就像自己在刷朋友圈,看到这么多很棒的图片,一定是一种享受。

StockSnap

StockSnap 一样是一个免费高清网站,它和Pexels 一样使用CC0 协议,你可以随便用,甚至可以不标出处,你可以查看最多下载 / 收藏 / 查看,每张图片都会显示作者信息,还会显示图片相关的标签,你还可以点击查看感兴趣的标签,它还提供最受欢迎的话题,同时你还可以收藏图片。



IconFont

IconFont 是阿里推出的免费矢量图标网站,它上面已经累计72 万个图标。如果你是设计师,你可以把自己制作的图标分享在上面,如果你是用户,它提供了不同的颜色,不同的文件格式的图片可以下载,同时也支持图片格式,这样的网站,实在不该错过。

Foter

Foter 是一个免费图片搜索工具,它虽然不生产内容,但是它却能帮你找到免费高清的图片资源,它上面已汇集几千万张可以免费使用的图片,你还可以筛选各种结果,还可以筛选图片使用的哪种协议,同时也支持筛选颜色。它可以收藏,也可以下载不同尺寸的图片。



CC 搜索

CC 搜索是一个专门搜索免费资源的搜索引擎,它可以搜索免费的资源、图片、多媒体等等,它还支持特定网站上的免费图片,比如像Flickr,Tumblr 等等,你还可以选择是否用于商业目的,是否可以修改。同时它还支持浏览器插件

0 373
() 全部评论
所有回复 (0)

热门

最新

  • Web3D编程 2 0 1 发布

    点击查看例子

    代码效果


    源码

    <!DOCTYPE html> <html> <head> <title>材质和光源</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/stats.js"></script> <script type="text/javascript" src="../libs/dat.gui.js"></script> <style> body { /* set margin to 0 and overflow to hidden, to go fullscreen */ margin: 0; overflow: hidden; } </style> </head> <body> <!-- Div which will hold the Output --> <div id="LapBin-output"> </div> <!-- Javascript code that runs our Three.js examples --> <script type="text/javascript"> // 加载所有内容后,我们将运行Three.js function init() { // 创建一个场景,该场景将包含所有元素,例如对象、摄影机和灯光。 var scene = new THREE.Scene(); // 创建一个摄像头,它定义了我们要看的范围。 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.2, 1000); // 创建渲染并设置大小 var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMapEnabled = true; // 创建平面 var planeGeometry = new THREE.PlaneGeometry(60, 30); var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; // 旋转并定位平面 plane.rotation.x = -0.5 * Math.PI; plane.position.x = 10; plane.position.y = 0; plane.position.z = -10; // 将平面添加到场景中 scene.add(plane); // 创建一个立方体 var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; // 定位立方体 cube.position.x = -4; cube.position.y = 3; cube.position.z = -10; // 将立方体添加到场景中 scene.add(cube); // 创建一个球体 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xdd77ff}); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // 定位球体 sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = -10; sphere.castShadow = true; // 将球体添加到场景中 scene.add(sphere); // 将摄影机定位并指向场景的中心 camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // 为阴影添加聚光灯 var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-40, 60, -10); spotLight.castShadow = true; scene.add(spotLight); // 将渲染器的输出添加到html元素 document.getElementById("LapBin-output").appendChild(renderer.domElement); // 渲染场景 renderer.render(scene, camera); } window.onload = init; </script> </body> </html>
  • LapBin(ThreeJS) 5 0 1 发布
  • 点击查看例子

    代码效果




    天空盒使用源码

    <!DOCTYPE html> <html lang="en">     <head>         <title>three.js - skybox</title>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">         <link type="text/css" rel="stylesheet" href="main.css">     </head>     <body>         <div id="container"></div>         <script type="module">             import * as THREE from '../build/three.module.js';             import { OrbitControls } from './jsm/controls/OrbitControls.js';             var scene, camera , renderer;             init();             animate();             function init() {                 // scene                 scene = new THREE.Scene();                 // camera                 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );                 camera.position.set( - 15, 7, 15 );                 camera.lookAt( scene.position );                              // skybox                 var cubeTextureLoader = new THREE.CubeTextureLoader();                 cubeTextureLoader.setPath( 'textures/cube/Park2/' ); //天空盒图片文件路径                 var cubeTexture = new THREE.CubeTextureLoader.load( [                     "posx.jpg", "negx.jpg", //图片 http://www.cglap.com/assets/lapbin/textures/cube/Park2/negx.jpg                     "posy.jpg", "negy.jpg", // http://www.cglap.com/assets/lapbin/textures/cube/Park2/negy.jpg                     "posz.jpg", "negz.jpg" //http://www.cglap.com/assets/lapbin/textures/cube/Park2/negz.jpg                 ] );                 scene.background = cubeTexture;                 // light                 var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );                 scene.add( ambientLight );                 var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );                 directionalLight.position.set( - 1, 1, 1 );                 scene.add( directionalLight );                 // renderer                 renderer = new THREE.WebGLRenderer( { antialias: true } );                 renderer.setSize( window.innerWidth, window.innerHeight );                 renderer.setPixelRatio( window.devicePixelRatio );                 document.body.appendChild( renderer.domElement );                 // 鼠标控制旋转                 var controls = new OrbitControls( camera, renderer.domElement );                 controls.minDistance = 5;                 controls.maxDistance = 50;                              //                 window.addEventListener( 'resize', onResize, false );             }             function onResize() {                 camera.aspect = window.innerWidth / window.innerHeight;                 camera.updateProjectionMatrix();                 renderer.setSize( window.innerWidth, window.innerHeight );             }             function animate() {                 requestAnimationFrame( animate );                 render();             }             function render() {                 renderer.render( scene, camera );             }         </script> </body> </html>
  • 例子查看链接gui

    为了能够快速地搭建three.js的交互ui,官方提供了一个GUI组件,通过简单的语法学习就能够使用。

    下面我们就来学习如何使用

    用法一

    首先声明一个对象,这个对象设置获取一个交互.

       var params = {                 color: '#ffffff',                 scale: 4,                 flowX: 1,                 flowY: 1 , states:"Walking"             };

    然后就就可以使用GUI来进行生成交互UI组件

    生成一个panel组件版,然后将组件的对象添加到这个组件版,完成之后就能够生成一个交互界面了。

     // dat.gui

    颜色选择器                var gui = new GUI();                 gui.addColor( params, 'color' ).onChange( function ( value ) {                    // do something                 } );


    拉动条
    不仅可以生成按钮,也可以生成拉动条。 gui.add( params, 'scale', 1, 10 ).onChange( function ( value ) { // do something  } );


    gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                   // do something } );


     gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                   // do something                 } );


    下拉表
     //选项 var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];  // 添加  gui.add( params, 'states' ).options( states ).onChange( function ( value ) {              // do something } );
    效果图


    全部代码

    <!DOCTYPE html> <html lang="en">     <head>         <title>three.js - gui</title>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">         <link type="text/css" rel="stylesheet" href="main.css">     </head>     <body>         <div id="container"></div>         <script type="module">             import * as THREE from '../build/three.module.js';             import { GUI } from './jsm/libs/dat.gui.module.js';             var scene, camera, renderer;             var params = {                 color: '#ffffff',                 scale: 4,                 flowX: 1,                 flowY: 1,                 states:"Walking"             };             init();             animate();             function init() {                 // scene                 scene = new THREE.Scene();                 // camera                 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );                 camera.position.set( - 15, 7, 15 );                 camera.lookAt( scene.position );                 // renderer                 renderer = new THREE.WebGLRenderer( { antialias: true } );                 renderer.setSize( window.innerWidth, window.innerHeight );                 renderer.setPixelRatio( window.devicePixelRatio );                 document.body.appendChild( renderer.domElement );                 // dat.gui                 var gui = new GUI();                 gui.addColor( params, 'color' ).onChange( function ( value ) {                     //do something                 } );                 gui.add( params, 'scale', 1, 10 ).onChange( function ( value ) {                     //do something                 } );                 gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                     //do something                 } );                 gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                     //do something                 } );                 //选项                 var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];                  gui.add( params, 'states' ).options( states ).onChange( function ( value ) { //do something                 } );;                              gui.open();                 window.addEventListener( 'resize', onResize, false );             }             function onResize() {                 camera.aspect = window.innerWidth / window.innerHeight;                 camera.updateProjectionMatrix();                 renderer.setSize( window.innerWidth, window.innerHeight );             }             function animate() {                 requestAnimationFrame( animate );                 render();             }             function render() {                 renderer.render( scene, camera );             }         </script> </body> </html>
  • LapBin(ThreeJS) 11 0 1 发布